Как я могу добавить фрагмент tExt в массив данных холста и сохранить его в виде файла png в javascript?

У меня есть изображение на холсте. Я хотел бы включить некоторые простые текстовые метаданные без необходимости установки дополнительных библиотек. Глядя на результат toDataURL, это кажется возможным путем анализа массива base64 из результата toDataURL и вставки фрагмента с длиной, типом, ключом: содержимое и байтами crc перед фрагментом IDAT. Однако мне не удалось сопоставить массив base64 со структурой png, описанной в https://www.w3.org/TR/PNG-Structure.html. Например, первые 8 байтов должны быть байтами подписи с десятичными знаками: 137 80 78 71 13 10 26 10. Но первые символы ASCii в результате toDataURL (после префикса data:image/png; base64, ") iVBORw0 Как это соответствует ожидаемой подписи?

Я использую javascript, и преобразование выполняется на стороне клиента.

Спасибо!


javascript canvas arrays png chunks
person Tech    schedule 11.06.2017    source источник
comment
dataURI, который у вас есть, представляет собой версию двоичных данных base64. Сначала вам нужно будет его декодировать или даже использовать arrayBuffer из большого двоичного объекта, возвращаемого canvas.toBlob, вместо использования toDataURL.   -  person Kaiido    schedule 12.06.2017
comment
Потрясающий! Большое спасибо за ваш ответ, @Kaiido!   -  person Tech    schedule 12.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Благодаря комментарию Кайидо выше, я успешно расшифровал массив toDataURL, используя код base64-binary.js здесь: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/. Это фрагмент того, как его использовать:

  pngLayer = layerToSave.canvas.toDataURL();
  var uintArray = Base64Binary.decode(pngLayer.replace(/data:image\/png;base64,/,''));
  console.log("signature:", uintArray.slice(0,8));
  console.log("chunk 1 length:", uintArray.slice(8,12));
  console.log("chunk 1 type:", uintArray.slice(12,18));

Этот код c был также полезен в качестве примера того, как работать со структурой png: https://github.com/gbenison/png-text-embed/blob/master/png-text-append.c

person Tech    schedule 12.06.2017