如何使用 Javascript 操作图像？答案

【问题标题】：How can I manipulate an image using Javascript?如何使用 Javascript 操作图像？
【发布时间】：2011-02-17 22:08:38
【问题描述】：

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

有没有办法做到这一点？我想我需要一些方法来将图像作为二进制对象来处理。

【问题讨论】：

标签： javascript image

【解决方案1】：

您可以使用 JavaScript 对其进行 base64 加扰和解扰，然后获取生成的 base64 并将其插入到您的 html 中的 img 标记中：

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

但是，用户仍然可以使用您的加扰算法 - 就像您隐藏或缩小它一样，专业的 JS 程序员无论如何都能理解正在发生的事情。

【讨论】：

我不一定要对算法本身进行加扰，我正在尝试对图像服务器端进行加扰，然后使用客户端提供的密码在客户端对其进行解扰，而无需访问网络。跨度>

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：