使用js修改图片像素颜色并保存

个人随笔 (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu)

需求

有时候，我们通常会有修改图片底色，或者让底色透明，也或者颜色交换的类似的需求，特别是我们做界面或类似渲染等功能时可能需求更特殊一些。
我们可能清楚像素如何修改，但是使用常用的mspaint又不太好修改，这时可能我们想写个程序来修改，不过用qt/mfc等写还是太重型了，还需要打开vs，编译运行调试，比较麻烦。

用js就比较简单了，打开chrome浏览器的开发者工具的console窗口，代码写进来就可以出结果到浏览器上了。
(注：由于chrome-cros的限制：修改网站网页图片时，需要先打开所属网站，从而没有cors跨域问题；修改本地目录图片时，需要使用–allow-file-access-from-files参数打开chrome浏览器，并且先打任意本地目录，从而没有cors跨域问题。）

修改图片流程

业务次序：
加载图片 -> 像素修改 -> 图片保存

JS代码次序：
Image下载/加载图片 -> 图片写入Canvas -> 通过Canvas.context获取像素/修改像素 -> 使用link触发点击保存图片

加载图片

图片通过Image加载，并绘制到canvas中

var newCanvas = document.createElement("canvas");
var image = new Image();
image.crossOrigin = "Anonymous";
image.onload = function(){
    newCanvas.width = image.width;
    newCanvas.height= image.height;
   	newCanvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
}
image.src = window.location.origin + "/favicon.ico";
document.body.insertAdjacentElement('afterBegin', newCanvas);

逐像素修改

通过Canvas.context获取像素/修改像素，更新到canvas

var ctx= newCanvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, newCanvas.width, newCanvas.width);
//获取到每个像素的信息
var px = imageData.data;
for(var i = 0; i < px.length; i+=4){
    px[i] = 255 - px[i]; //r
    px[i+1] = 255 - px[i+1]; //g
    px[i+2] = 255 - px[i+2]; //b 
 }
 ctx.putImageData(imageData,0,0);

保存图片

使用link模拟点击下载图片。

var dataUri= newCanvas.toDataURL("image/png");
var link = document.createElement('a')
link.href = dataUri;
link.download = "icon.png";
link.click();

个人随笔 (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu)