Html 在画布上绘制之前操纵像素

我使用以下代码在画布上绘制base64图像。我从PHP中的查询中获取base64字符串。使用globalAlpha，我可以将整个图像的alpha设置为0。我需要用一个表格操纵随机像素的alpha值。所以当我在表单中提交7时，需要将7个随机像素从alpha 0设置为255

是否可以操纵此图像的alpha，然后将其绘制到画布上？原始图像保持秘密是非常重要的

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);
} 

var complex=”“；
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var image=新图像（）；
image.src=“数据：image/png；base64，”+complex；
image.onload=function（）{
ctx.drawImage（图像，0,0）；
} 
我不知道你说的“保密”是什么意思，但我想你的意思是：

一次只显示几个像素
使人们无法查看源代码和发现图像（使用一点JavaScript）
如果这些是唯一的要求（如果它们是要求），那么您必须：

在服务器上解码图像
在服务器上随机选取几个像素，并将这些像素的数据（RGB值）发送到客户端
使用画布显示接收到的少数像素
这种方法的好处是，您根本不需要使用ImageData。您可以使用接收到的每个像素的RGB值的
fillStyle

这种方法不太好的地方在于，它意味着您必须在服务器上做更多的工作，但是，如果您希望图像对客户端完全隐藏，这是唯一的方法。
对不起！我已经测试过了，但完全忘了评论。。我有点喜欢，但我不确定到底发生了什么。我可以把我的新代码放在这里。但是在哪里最好呢。在一个新的答案中，或者编辑我的第一篇文章？在JSFIDLE中，或者在你的答案中加上一个“编辑”注释，为了保持你的第一个问题原样，我测试了这段代码，但它还不起作用。画布保持空白，无论我用什么来代替我。如果删除“var rand[]”行，则会将图片绘制到画布上。除此之外，是否可以隐藏base64代码。重要的是，原始图片必须保密，任何人都无法猜到最终的图片是什么。正如我说的，我没有测试过它，它只是一个供你使用的算法。我更新答案，并给你的东西，谢谢！我用正方形做了一些测试。有一件事我不明白，那就是它的风格。如果我将其更改为黑色（0,0,0），则alpha为255的像素将变为红色。红色是从哪里来的？我的错，将这一行更改为“for（var i=4；i<canvas id="rectangle" width="300" height="300" style="border:solid black 1px; </canvas>
​

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);​