1) I have base64 image data, this image was used to draw as an image inside canvas. Later on i retrieved it back as base64, sending it to another service and created an image (store as image file inside storage).
2) In another page, i load back this image as base64, draw back inside canvas. All the rendering part looks good and working perfectly.
But, the Uint8ClampedArray no(1) was different with no(2). Or is it this is an expected behavior? Here is my code :
/** first part **/
var img = new Image();
img.src = 'data:image/jpeg;base64,' + data.result;
// wait for image finish load
// then draw image into canvas
img.onload = function () {
// draw cover image into canvas
// ctx is just canvas context
ctx.drawImage( img, 0, 0 );
// clampedArray is just a normal variable
clampedArray = ctx.getImageData( 0, 0, canvas.height, canvas.width );
console.log(clampedArray.data); //<----------------------- (1)
var base64Image = secret.toDataURL( 'image/jpeg' );
// sending base64Image to another services
}
/** second part/another page **/
var img = new Image();
img.src = 'data:image/jpeg;base64,' + data.result;
img.onload = function () {
ctx.drawImage( img, 0, 0 );
clampedArray = ctx.getImageData( 0, 0, coverAfter.height,coverAfter.width );
console.log(clampedArray.data); //<----------------------- (2)
}
data.result return the same base64, but when i console.log for both (1) and (2), i got the different result(Uint8ClampedArray)
