Hello,

My goal is to read a .png file into a page, identify the chunks, and then insert a new chunk prior to IEND. I understand that .png files start with the following hex characters:

89 50 4E 47 0D 0A 1A 0A

I have tested the methods described below with many different sample .png files and I always get:

89 50 4E 47 dA 1A A0 00

I have checked with a hex-editor the originals and they have the proper signature before I do what I do to them. My questions is that if a file with this signature is transferred/stored, is it unusable/corrupt/broken?

End users of this project would be out in the field, without connectivity. They would be connecting a scientific device to a laptop/tablet, transfer some .png images from the device to the laptop, and then need to store some additional information within the picture, so that the specific information travels with the image, always. These photos would be stored locally until connectivity is restored (in town) and then be uploaded to a server.

Below is my process and I welcome any help, comments, suggestions. My status is amateur with respect to development, but I wouldn't say I'm a novice.

A user drags a .png from a file folder into the appropriate <div></div>, and fires the following event:


png.ondrop = function(e){
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
if (file.type === 'image/png') {
reader.onload = function (event) {
png.style.backgroundImage = 'url(' + event.target.result + ')'};
console.log(file);
reader.readAsDataURL(file);
return false}}};


I grab the base64-encoded data URL and use the following decoder - a function which is not my own, but rather from a site that converts .php commands into .js functions and that I assume works - to get a binary object/string/blob(?):

function base64_decode (data) {
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
dec = "",
tmp_arr = [];

if (!data) {
return data;}

data += '';

do { // unpack four hexets into three octets using index points in b64
h1 = b64.indexOf(data.charAt(i++));
h2 = b64.indexOf(data.charAt(i++));
h3 = b64.indexOf(data.charAt(i++));
h4 = b64.indexOf(data.charAt(i++));

bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;

o1 = bits >> 16 & 0xff;
o2 = bits >> 8 & 0xff;
o3 = bits & 0xff;

if (h3 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1);
} else if (h4 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1, o2);
} else {
tmp_arr[ac++] = String.fromCharCode(o1, o2, o3)};
} while (i < data.length);

dec = tmp_arr.join('');

return dec};


Now I use the following code to get to yield a hexadecimal string that I will be manipulating:


function bin2hex (s) {

var i,
f = s.length,
a = [];

for (i = 0; i < f; i++) {
a[i] = s.charCodeAt(i).toString(16)};
return a.join('')};


The product from this process always has a signature of:

89 50 4E 47 dA 1A A0 00

Is this a problem?

Thank you