Manipulate pixels before drawing on the canvas - html

Question

I'm using the following code to draw a base64 image on the canvas. I get the base64 string from a query in PHP. With globalAlpha i can set the alpha of the whole image to 0. I need to manipulate the alpha of random pixels with a form. So when I submit 7 with the form, 7 random pixels need to be set from alpha 0 to 255.
Is it possible to manipulate the alpha of this image and after that, draw it to the canvas? It's very important that the original image remains secret.
var complex = "<?php echo str_replace("\n", "", $DBimage); ?>";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "data:image/png;base64," + complex;
image.onload= function(){
ctx.drawImage(image, 0, 0);
}

Answer 1

<canvas id="rectangle" width="300" height="300" style="border:solid black 1px; </canvas>
​
the javascript
var canvas = document.getElementById('rectangle');
//replace this rectangle drawing by your image
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,29,28)";
context.fillRect(10, 10, 280, 280);
}
var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
var numberOfAlphaPix = 10000; //this is the number of pixel for which you want to change the alpha channel, I let you do the job to retrieve this number as you wish
//fill an array with numbers that we'll pop to get unique random values
var rand = [];
// Loop over each pixel with step of 4 to store only alpha channel in array ( R=0 ,G=1 , B=2, A=3 )
for (var i = 3; i < imgd.data.length; i += 4) {
rand.push(i);
}
//shuffle the array
for (var i = rand.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = rand[i];
rand[i] = rand[j];
rand[j] = tmp;
}
for (var i = 0; i < numberOfAlphaPix; i++) {
imgd.data[rand.pop()] = 255; //set alpha channel to 255
}
// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0, 0);​
Try it here http://jsfiddle.net/LuEzG/5/

Answer 2

I'm not sure what you mean "stay secret", but I think you mean:
show only a few pixels at a time
Make it impossible for people to view source and discover the image (with a bit of JavaScript)
If those are the only requirements (And if they are requirements) then you'll have to:
decode the image on the server
Pick a few random pixels on the server and send the data for those pixels (RGB values) to the client
Use canvas to show those few pixels that were received
The nice thing about this approach is that you don't need to use ImageData at all. You can just fillRect with a fillStyle of the RGB values for each pixel recieved.
The not-so-nice thing about this approach is that it means you have to do a lot more work on the server, but if you want the image to be completely hidden from the client, it's the only way.