Welcome to WebmasterWorld Guest from 54.90.204.233

Forum Moderators: phranque

Image editing: suggestions on merging a bunch of images in to one

     
8:57 pm on Aug 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1004
votes: 96


I have 3,000 images that are all 64x64px. They're actually all emojis.

I need to do 2 things:

1. Merge them in to a single looooooong image that's 64x192000px that will be used for a sprite; and

2. Place them there in a specific order... I have a text file with a list of the file names that are in the order that I want. The file names are based on the Unicode, so 1f600.png (the smiley) is the one that I would want first in the list, but alphabetically it's about 2000 spots down the list; 00a9.png is alphabetically first, which is a copyright symbol.

I probably won't keep them all as one long image; in the end, I'll probably have about 10 categories, so one sprite for each category. But that could still be several hundred of these emojis in one category.

Doing this manually would take forever! So I'm hoping you guys can suggest any type of program that can do it, or possibly any type of technique that could make the job easier.

(Dimitri pointed out the Unicode emoji list to me earlier, but about 1/3 of my traffic is Windows 7 so I can't really rely on that yet; I'll have to use images for at least the next few years)
9:19 pm on Aug 18, 2018 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


A panoramic stitcher ? with the image "overlap" set to zero ?
9:40 pm on Aug 18, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15450
votes: 739


If you globally converted all the hexadecimal numbers to decimal, they would probably alphabetize nicely. (This may or may not be a completely useless suggestion, depending on what exact software you're working with.)
6:41 am on Aug 19, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1004
votes: 96


A panoramic stitcher ? with the image "overlap" set to zero ?

Any recommendations on a program? I searched for panorama stitcher and there are a bajillion options, but the first 10 I downloaded stitch them horizontally instead of vertically.


If you globally converted all the hexadecimal numbers to decimal, they would probably alphabetize nicely. (This may or may not be a completely useless suggestion, depending on what exact software you're working with.)

Well, I'm not sure. Using &#x1f600 on a conversion website, it converted to:

&#x1f600

I have no idea how to use that...
10:41 am on Aug 19, 2018 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


I searched for panorama stitcher and there are a bajillion options, but the first 10 I downloaded stitch them horizontally instead of vertically.

So..rotate each emoji by 90 degrees clockwise..stitch them horizontally..then rotate the resulting long horizontal string itself by 90 degrees counter clockwise..That puts them into a long vertical strip with each one sitting on top of the other one and in the correct orientation..

Thinking rotationally some times rather than thinking laterally can get you there :)

HTH
10:57 am on Aug 19, 2018 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2856
votes: 155


The Image Magick montage command? [imagemagick.org...]

I am not sure why Windows 7 is a problem. I thought that means IE9+ so you have @fontface support so can use unicode emoji's
4:20 pm on Aug 19, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15450
votes: 739


Using &#x1f600 on a conversion website
&#x1f600
Haha, no, you just convert the complete number 1f600 into its decimal equivalent, which is 128512. A few lines of javascript should do it (but then, I routinely use javascript for things God never intended javascript to be used for, because I no longer have the energy to learn another language.) If necessary, pad the lines with leading zeros, but they're probably all the same number of digits anyway.
6:58 am on Aug 20, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1004
votes: 96


I am not sure why Windows 7 is a problem. I thought that means IE9+ so you have @fontface support so can use unicode emoji's

I thought the same thing, and I was willing to forget about IE9 for emojis. But then I tested with the latest versions of Chrome and FF on my Windows 7 laptop, and nothing worked. After a bit of digging, I found that it's an OS thing, not a browser thing.

If anyone knows a way to make them work on Windows 7, though, I'm totally open to that! It would be a lot better, make my pages load faster, and shrink my database considerably :-)
2:31 pm on Aug 20, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9067
votes: 752


Have you considered storing in MySQL and just calling the image? These are emoji's, fixed in size, etc, and should work just fine in that regard.
7:12 pm on Aug 20, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1004
votes: 96


You mean like using a PHP regex on the page, converting &#x1f600 to <img src="spacer.gif" data-em="1f600" alt="">?

Something like this... just typed up for this example, so please forgive any glaring typos:

preg_replace('/\b&#x1(\w{4})\b/i', '<img src="spacer.gif" data-em="$1" alt="">', $data);


It's not a bad idea... it would definitely make my database smaller, but it might make the page load a fraction slower from using the same regex several times. It's worth testing, though.

Unless you mean that there's a way to access the emoji image without having an image copy on the server?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members