Canvas系列之滤镜实际效果

日期:2021-02-23 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

Canvas 真的是1个奇异的物品,不但可以绘图各种各样图型、文字和位图,还可以对位图开展繁杂的像素运算和解决。因而像滤镜这些物品,实际上 Canvas 还可以来完成。接下来,是见证惊喜的時刻。

最先,大家必须有1个 Canvas 器皿,比如:

<canvas id="myCanvas" width="800" height="800"></canvas>

接下来,大家必须将应用 Canvas 来绘图1张照片:

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = "./images/00.jpg";	// 自备照片连接
img.onload = (e) => {
	ctx.drawImage(img, 0, 0, 800, 800);	// 第1个800表明绘图照片的宽,第2个800表明绘图照片的高
}

Canvas初次绘图的实际效果

再接下来便是对照片的像素开展1些实际操作。而要完成这样的实际操作,最先必须从 Canvas 获得到照片的像素信息内容,而获得这些信息内容能够根据 getImageData() 来完成。

// ... 省略前面编码
img.onload = (e) => {
	// ... 省略前面编码
    img = ctx.getImageData(0, 0, 800, 800);	// 得到包括每一个像素点色调的字节数据信息
}

因为照片的尺寸为 800 * 800,由于要对像素点开展遍历,以得到每个像素点的红、绿、蓝色值。因而:

// ... 省略前面编码
img.onload = (e) => {
	// ... 省略前面编码
    var pixelLen = 800 * 800;   // 得到像素个数
    for(var i = 0; i < pixelLen * 4; i += 4) {
        var redC = img.data[i], // 第1个字节企业意味着鲜红色
            greenC = img.data[i + 1],    // 第2个字节企业意味着翠绿色
            blueC = img.data[i + 2],   // 第3个字节企业意味着蓝色
            alpha = img.data[i + 3];   // 第4个字节企业意味着全透明度
    }
}

根据上面循环系统,大家获得到了包括在照片数据信息中的每一个像素点的实际色值;必须留意的1点是,每个像素点的数据信息并不是1位,而是邻近的4位,各自意味着了该点的红、绿、蓝和全透明值。因而,具体上位图字节数据信息的数字能量数组长度等于像素点个数乘以 4,在 for 循环系统中大家也对于这1特点开展了相应解决。

根据将每点的红、绿、蓝值开展均值,随后再将转化成的均值值同样地授予该像素点的红、绿、蓝值,就可以产生灰度值实际效果,最终根据 putImageData() 方式来再次绘图照片便可,编码以下:

// ... 省略前面编码
img.onload = (e) => {
	// ... 省略前面编码
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... 省略前面编码
        var grey = parseInt((redC + greenC + blueC) / 3);  // 均值后获得灰度值值
        img.data[i] = grey; // 更改鲜红色值
        img.data[i + 1] = grey; // 更改翠绿色值
        img.data[i + 2] = grey; // 更改蓝色值
    }

    ctx.putImageData(img, 0, 0, 800, 800);  // 再次绘图照片
} 

此时,则会产生灰度值实际效果,以下图

Canvas第2次绘图照片-灰度值实际效果

全透明度的操纵只必须改动第4个字节企业对应的标值便可,该标值的范畴为0~256,0意味着彻底全透明,256意味着进行不全透明。比如:

// ... 省略前面编码
img.onload = (e) => {
	// ... 省略前面编码
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... 省略前面编码
        img.data[i + 3] = 128;	// 全透明度50%
    }
    // ... 省略前面编码
} 

Canvas第3次绘图实际效果-提升全透明度

由此,根据操纵照片中每一个像素4个数据信息的值,便可做到滤镜的实际效果,是否 so easy!

参照参考文献:

《HTML5 基本专业知识、关键技术性与前沿实例》 刘欢 编著

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。