I'm using fopen() with the binary-read parameter ("rb") on an image file, as below:
$imageURL = "assets/" . $gameObject . "Assets" . "/" . $gameObject . $description . "Base8SmallPNG.png";
$imageExposed = fopen($imageURL, "rb");
While the image is read, the character(s) sitting at the file pointer are echoed after converting them to hexadecimal:
while (fgetc($imageExposed) !== false) {
$binaryString = fgetc($imageExposed);
echo bin2hex($binaryString);
}
Somehow, this process is dropping every second byte - for example, the first octet is 50 47 0A 0A (PG <LF> <LF> in ASCII) rather than 89 50 4E 47 (.PNG). What could be making this happen?
On a possibly related note, the image is bloating after being processed, from ~4415B to 4526 - despite dropping data as described above. Although the segment containing the image bitmap (between IDAT and IEND) is 980B in my bit-editor (Frhed), it inexplicably expands to 1554B after processing (IDAT was approximated as DT [44 54]) without affecting the total amount of data echoed.
Background: The image is a 4.4KB PNG; it's being processed as described above in PHP, then the echoed data is being received with the following AJAX call and then pushed to the console; the data after 4454 (representing the IDAT chunk) is pushed to a Uint8ClampedArray to be displayed - or it would be, if the bytes weren't being dropped. The data is still being sent to the array, but it isn't being converted to decimal for the process or pushed to a canvas element via ImageData.
AFAIK Uint8ClampedArray's need decimalised data to work, so I've written a hex/decimal converter as well. Because the issue is turning up in the raw AJAX response, there's no point displaying the decimalised data or it's ImageData representation, so that's why I've included those but stopped them from producing output.
function imageAnalysis(dynamicObject, gameObjectDesc) {
phpCourier = new XMLHttpRequest();
phpCourier.onreadystatechange = function () {
if (phpCourier.readyState === 4 && phpCourier.status === 200) {
var imageParserTest = document.createElement('canvas'),
stringBox = [],
base = 16,
hexNumbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
output,
stringBoxCleaner,
dimX = 24,
dimY = 47,
channels = "rgba",
colourMap = [],
colourStep = 0,
chunkString,
bitMapping;
imageParserTest.style.zIndex = 90000;
for (bitCounter = 0; bitCounter < phpCourier.response.length; bitCounter += 1) {
stringBox.push(phpCourier.response.substr(bitCounter, 1));
stringBox.push(phpCourier.response.substr(bitCounter + 1, 1));
colourMap.push(channels.substr(colourStep, 1));
if (colourStep !== channels.length) {
colourStep += 1;
}
if (colourStep === channels.length) {
colourStep = 0;
}
/*if (stringBox[0] + stringBox[1] > 128) {
if (colourMap[bitCounter] === "a") {
output = 255;
} else if (colourMap[bitCounter] === "b") {
output = 255;
} else if (colourMap[bitCounter] === "g") {
output = 255;
} else if (colourMap[bitCounter] === "r") {
output = 255;
}
} else {
if (colourMap[bitCounter] === "a") {
output = 255;
} else if (colourMap[bitCounter] === "b") {
output = 0;
} else if (colourMap[bitCounter] === "g") {
output = 0;
} else if (colourMap[bitCounter] === "r") {
output = 0;
}
}*/
output = stringBox[0] + stringBox[1];
//console.log(phpCourier.response.substr(bitCounter, 8));
//console.log(phpCourier.response);
//Uint8ClampedArray[bitCounter] = output;
if (phpCourier.response.substr(bitCounter, 4) === "4454") {//"49444154") {
Uint8ClampedArray = new Uint8ClampedArray(phpCourier.response.length - bitCounter - 9);
bitMapping = true;
console.log("bah");
}
if (bitMapping === true) {
Uint8ClampedArray[(phpCourier.response.length - bitCounter - 9)] = output;
console.log(phpCourier.response.substr(bitCounter, 2));
}
stringBox = [];
}
console.log(Uint8ClampedArray);
console.log("Base Data Length " + phpCourier.response.length);
console.log("Required Dimensions " + dimX * dimY * 4);
console.log("Output Length " + Uint8ClampedArray.length);
//pipedImage = new ImageData(Uint8ClampedArray, dimX, dimY);
//document.body.appendChild(imageParserTest);
//imageParserTest.getContext("2d").putImageData(pipedImage, dimX, dimY);
//console.log(pipedImage);
//console.log(imageParserTest.getContext("2d").getImageData(39, 66, 39, 66));
console.log(phpCourier.response.length);
console.log(phpCourier.response);
}
};
phpCourier.open("POST", "bitManip.php", true);
phpCourier.send("gameObject=" + dynamicObject + "&description=" + gameObjectDesc);
}
imageAnalysis(aeolus, "Basic");