Canvas将彩色图片转换为灰度图

人的一切痛苦,本质上都是对自己的无能的愤怒。

近一段时间发生了很多事情,不得已在几次失眠中对自己审视许久。强行打了一针鸡血驱使自己跑步,看书,背单词,工作。当然现在心绪稳定了很多却也莫名任性了几分,迫切地想去追求,追求一个更强大的自己。
手头有本大学那会儿买的关于前端的书,放在每一个难眠的清晨最近也快翻完了。对些有意思的地方自己也做个笔记,充实自己。
canvas 元素用于在网页上绘制图形,是h5标准中新的元素。通过canvas我们可以进行图像的像素处理,实现华丽的特效。这里通过canvas对彩图进行灰度图转换熟悉下canvas的API。
html:

<body>
<img src="images/Asuka.jpg" id = "color" alt="Asuka"/>
</body>

js代码:

// 关于那些兼容性和安全性判断大家知道就好~
function createGSCanvas(img){
    var canvas= document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img,0,0);

    var c = ctx.getImageData(0,0,img.width,img.height);
    for (var i = 0; i < c.width*c.height*4; i+=4) {
        var r = c.data[i];
        var g = c.data[i+1];
        var b = c.data[i+2];
        c.data[i] = c.data[i+1]=c.data[i+2]=((r+g+b)/3);
    }
    ctx.putImageData(c,0,0,0,0,c.width,c.height);
    return canvas.toDataURL();
}

window.onload = function(){
    var color = document.getElementById('color')
    var gsimage = document.createElement("img");
    gsimage.id = "after"
    gsimage.src = color.src;
    gsimage.src = createGSCanvas(gsimage);
    insertAfter(gsimage,color);
}

通过取得原始的图像数据,循环遍历其中每一个像素,将每个彩色像素的RGB成分求得平均值得到对应的灰度值来进行转换。
drawImage:读取图片后,使用drawImage方法在画布内进行重绘,将图像文件插入画布中。
getImageData (x, y, w, h):获取canvas上以(x, y)为左上角,宽度为w,高度为h的一块矩形区域的像素数据。获取到的imageData对象拥有3个属性,分别是width:每行的像素数量;height:每列的像素数量。以及data:存有从canvas中获取的每个像素的RGBA的值,该数组为每个像素保存了四个值,分别是红色、绿色、蓝色和alpha透明度,每个值在0~255之间,数组填充的数据是从左到右,从上到下。通过对data的操作可以实现对图像像素的处理。
putImageData (imageData, dx, dy, [dirtyX, dirtyY, dirtyWidth, dirtyHeight]):在绘图画布上绘制给定的ImageData对象。
这里还需要加个Tips:getImageData只能操作与脚本位于同一域中的图片,本地调试时可以打开chrome快捷方式的属性,在目标栏中后添加 –allow-file-access-from-files。
ConvertToGS