Comment puis-je ajouter un bloc tExt dans un tableau de données canvas et l'enregistrer sous forme de fichier png en javascript?

J'ai une image sur une toile. Je voudrais inclure de simples méta-données de texte sans avoir besoin d'installer des bibliothèques supplémentaires. En regardant le résultat de toDataURL, cela semble possible en analysant le tableau base64 du résultat toDataURL et en insérant le fragment avec length, type, key: content, et crc bytes avant le fragment IDAT. Cependant, je n'ai pas réussi à faire correspondre le tableau base64 à la structure png décrite dans https://www.w3.org/TR/PNG-Structure.html. Par exemple, les 8 premiers octets sont censés être des octets de signature avec les décimales: 137 80 78 71 13 10 26 10. Mais les premiers caractères ASCII dans le résultat toDataURL (après les données: image/png; base64, "préfixe) est iVBORw0. Comment est-ce que correspond la signature attendue?Comment puis-je ajouter un bloc tExt dans un tableau de données canvas et l'enregistrer sous forme de fichier png en javascript?

J'utilise javascript et la conversion se fait sur le côté client.

Merci!

Source

2017-06-11 Tech

le yoy've dataURI a est une version base64 des données binaires. Vous devrez d'abord le décoder, ou même utiliser un arrayBuffer de l'objet blob retourné par canvas.toBlob, au lieu d'utiliser toDataURL – Kaiido

Awesome! Merci beaucoup pour votre réponse, @Kaiido! – Tech

Merci au commentaire de Kaiido ci-dessus, je réussi à décoder le tableau de toDataURL en utilisant le code base64-binary.js ici: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/ Voici un extrait de comment l'utiliser:

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

Ce code c est également utile comme un échantillon de la façon de travailler avec la structure .png: https://github.com/gbenison/png-text-embed/blob/master/png-text-append.c

Source

2017-06-12 15:41:14 Tech

Comment puis-je ajouter un bloc tExt dans un tableau de données canvas et l'enregistrer sous forme de fichier png en javascript?

Répondre

Questions connexes