I am going to change the colors of the pixels of a png image(which is in base64 format). This is my source code:
var myImg = new Image(); myImg.src = <...>; //"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABQklEQVR4nO3bC27CMBAFQ"; myImg.onload = function() { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(myImg,0,0); var imgd = ctx.getImageData(0, 0, myImg.width, myImg.height); for (i = 0; i <imgd.data.length; i += 4) { imgd.data[i] = 255; imgd.data[i+1] = 0; imgd.data[i+2] = 255; } ctx.putImageData(imgd, 0, 0); $("#Cell").append(myImg); }
the problem is that when I check the value of imgd.data[i] (before changing the color), it is zero for every i. the original image is shown, but the color does not change. Do you know why?