Forum Moderators: phranque

Message Too Old, No Replies

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

         

csdude55

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

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



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)

Leosghost

9:19 pm on Aug 18, 2018 (gmt 0)

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



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

lucy24

9:40 pm on Aug 18, 2018 (gmt 0)

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



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.)

csdude55

6:41 am on Aug 19, 2018 (gmt 0)

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



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...

Leosghost

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

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



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

graeme_p

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

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



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

lucy24

4:20 pm on Aug 19, 2018 (gmt 0)

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



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.

csdude55

6:58 am on Aug 20, 2018 (gmt 0)

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



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 :-)

tangor

2:31 pm on Aug 20, 2018 (gmt 0)

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



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.

csdude55

7:12 pm on Aug 20, 2018 (gmt 0)

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



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?