如何使用Javascript操作图像？

Question

我在服务器上以加扰的形式存储了一张图像，然后将其显示给用户。我想使用Javascript来动态解扰客户端的图像。

有没有办法做到这一点？我想我需要一些方法来操作图像作为一个二进制对象来解扰它。

Answer 1

您可以使用JavaScript对其进行base64、置乱和解扰，然后获得结果base64并将其插入到html的img标记中：

<img alt="Embedded Image" 
   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

但是，用户仍然可以使用您的加扰算法--只要您将其隐藏或缩小，专业的JS程序员就可以理解发生了什么。

Answer 2

你可以用一块画布。

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

加载图像并将其绘制在画布中：

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'toto.jpg';

然后，您可以使用上下文的方法来操作图像：

https://developer.mozilla.org/en/canvas_tutorial

Answer 3

您可以将像素数据复制到画布中并在那里对其进行操作。这里有一个可靠的答案：Get image data in JavaScript?