Question

我正在使用以下代码在画布上绘制base64图像。我从PHP中的查询中获取base64字符串。使用globalAlpha，我可以将整个图像的alpha设置为0.我需要使用表单操纵随机像素的alpha。因此，当我使用表单提交7时，需要将7个随机像素设置为从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);
}

Answer 1

<canvas id="rectangle" width="300" height="300" style="border:solid black 1px; </canvas>

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

在这里试试http://jsfiddle.net/LuEzG/5/

Answer 2

我不确定你的意思是“保守秘密”，但我认为你的意思是：

一次只显示几个像素
让人们无法查看来源并发现图像（使用一些JavaScript）

如果这些是唯一的要求（如果它们是要求）那么你将不得不：

解码服务器上的图像
在服务器上选择一些随机像素，并将这些像素的数据（RGB值）发送到客户端
使用画布显示接收到的少数像素

这种方法的好处在于您根本不需要使用ImageData。对于每个接收到的像素，您只需fillRect fillStyle个RGB值。

这种方法的不太好处是它意味着你必须在服务器上做更多的工作，但是如果你想让图像完全隐藏在客户端之外，这是唯一的方法

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

2 个答案: