Объединение двух изображений base64 в Javascript

Question

Можно ли выполнить простую конкатенацию строк, чтобы «объединить» 2 базовых 64 кодированных изображения вместе, если изображения имеют одинаковые характеристики (ширина / высота / глубина цвета и т. Д.)?

например,

img1 w=100, h=200
img2 w=100, h=200

img1+img2 приводит к

img3 w=100, h=400

, интуитивно это звучит как глупый вопрос, так как предположительно кодировка включает заголовки, содержащие метаданные, но я не знаю достаточно о base64, чтобы знать лучше;)

Пока мои предварительные тесты дали неверные результаты.

Спасибо, Элай

Answer 1

, так как предположительно кодировка включает заголовки, содержащие метаданные, но я не знаю достаточно о base64, чтобы знать лучше;)

Вы правы: содержание data: URI - это закодированное в base64 представление полных данных файла изображения, включая заголовки.Вам не повезет, объединяя их таким образом.

Единственный способ, которым может быть возможен на стороне клиента, - это использование Canvas. Вот SO вопрос, который идет в этом направлении (он извлекает изображение в объект canvas).

Answer 2

Я сталкивался с этим постом с другой стороны фактической реализации решения. Вы можете объединить строки base64. Вам просто нужно убедиться, что во время кодирования (в нашем случае - время объединения) вы знаете точную длину двух строк или используете разделитель. Я написал формат файла для объединения файлов в base64, который клиент затем анализирует. Поскольку это для холст флеш-плеера называется ноль, формат файла называется .zwf. Вот формат. Кстати, вы можете рекурсивно кодировать целые каталоги с помощью этого формата.

шаблон

'<path>' <index> <length in characters> <encoding type (b64, b256, UTF8, etc.)> //HEADER these are entries in the zwf 
'<path>' <index> <length> <encoding>
'<path>' <index> <length> <encoding>
||||||||||                           //BREAK Indexes are relative to this
<file1><file2><file3>                //DATA All contents are here nose to tail

example.zwf

'hi.txt' 0 11 UTF8
'images/face.png' 11 1459 b64
||||||||||
Hello Worlddata:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAgAAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAEAAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwoLCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBQRFBQUFREUFBQVFBQUFBUPFREPExIQFBIQDxUVFBASERQUFRESFBUUEBIPFRIN/8AAEQgAGwAbAwERAAIRAQMRAf/EABgAAAMBAQAAAAAAAAAAAAAAAAYHCAUC/8QAMhAAAQMDAwEEBwkAAAAAAAAAAQIDBAURIQAGEjEIEyJBBwkVMlGhsRQWJTRhYoGCkf/EABoBAAIDAQEAAAAAAAAAAAAAAAYHAgMEAAX/xAAtEQABAwICCAYDAQAAAAAAAAABAAIDBBEhoQUTMUFRgbHwBhIUcZHhYcHRMv/aAAwDAQACEQMRAD8AX27Kq7SdqVqfDsZcaG881cXAUlBINvO1r21skPkYXDcs1OxsszI3YAkDNHPZt2VtuP6P5dRq/dKmlj7W87Kw86gkDmpSxdeTYm5z56UkomnnJldt2Y/y6d8Pp6eANhZs24c/wuN2bIRtipSPZ7TnsdwocaX7zTal8j3aFDFvCSB5XNsW0aaDqXSROglN3MPO30UuvENI2GZtTC2zHjlfHqOiGlRLqONEtkKeZB7zwrlMlwHFcUyWlNciLgXHXXTxa6J0YNrhSpZ/TzMltexTw7MVTplYrTEZqNAhpj0cxH2nXgEqfS6e9CED3lXQm4tfIuMjSt1DxK6OU/5J2nonayojfTtlhBxAOA7tzRX6bNxmS4xSkRkRwsNPPovdTbiErSEmxIvZebE9BnOiXQEIc+WbhYd5II8T1BayKn3G7r/rMpUlvPTRlZAHmUySfTDApiSmJ+JS7lKWWVjiD+5fQfM/pqD5mtVjIXPx3JydkTb1c3My3vKBW3KLUZUt1M5DDaFNOgLNykKBAUkfEXt1vg6XGlZJG1hFrg4g99+ybGhdW+haQSLYEeyLO1zvp70a7o2W1Snkz48mPNE1ySORfcStg8uQtZQ73qMeK1sY9nQmshjfJbBxGV79ckOeIiyeaOPe0HO1uh+UnWu0m3wHe0cpc8wmVj5o0Tip4tz+kIel4OUuxFmGywWfB4gMD4mx+usi2K5PV5KU7tSotrUot/ei3DkbWVFTyx/VP+asEEU7AJWg24rm1EtOSYnEX4LQ9ZRHahbx2azHabYZYocnu2m0BKUcn0FVgMZIB10wDPKxosLHD4UGvdIS95uTvUTTPzK/4+mqVYv/2Q%3D%3D

Используя .zwf, вы можете объединять произвольные типы файлов и сокращать HTTP-запросы. Вы можете упаковать весь сайт в ZWF.

JavaScript практически в любом браузере может обрабатывать очень большие строки base64. Я пошел до 2Mb во всех современных браузерах. Мое приложение не требует большего, во что бы то ни стало найти пределы.

На стороне клиента, когда пользователь запрашивает файл, ноль вызывает .slice () в разделе данных, чтобы получить его на основе индекса и длины в заголовке. Slice - один из самых быстрых методов, которые я знаю.

Единственная проблема в том, что браузеры

Answer 3

Я думаю, что то, что вы предлагаете, имеет (как минимум) 2 проблемы:

1. Вы не указали, в каком формате изображения в первую очередь (например, GIF, JPG, PNG и т. Д.) Base64 - это просто способ кодирования двоичных данных в текст. Возможность соединения двух изображений с помощью простой конкатенации битовых потоков зависит от основного двоичного формата изображений.

2. Я не знаю ни одного современного графического формата, который поддерживал бы этот вид двоичной конкатенации. Ваше первоначальное беспокойство (что у изображений есть метаданные где-то в их двоичном представлении, которое определяет размер изображения, битовую глубину и т. Д.) Вполне обосновано.

Я думаю, что вы могли бы пойти с этим, чтобы найти библиотеку манипулирования изображениями, которая позволяет вам брать ваши двоичные изображения (однажды декодированные из Base64), сшивать их вместе, как вы считаете нужным, и затем перекодировать в результате увеличенное изображение как Base64.

Если вы ограничены только JavaScript, похоже, что http://www.pixastic.com/lib/ - это хорошая библиотека для работы с изображениями, но я не могу определить, поддерживает ли она необходимый вам тип вышивки. Это место для начала, хотя.