这篇文章主要介绍了html5如何利用帆布实现颜色容差抠图功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
利用帆布的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点。比如下面这一张图片,如果我们想要扣去白色部分(粉色是身体的背景颜色)。
let canvas =, document.querySelector(& # 39; #帆布# 39;);
let context =, canvas.getContext (& # 39; 2 d # 39;);
let img =, document.createElement (& # 39; img # 39;);
img.src =& # 39;。/head2.png& # 39;;
时间=img.onload function (), {
,,,canvas.height =, img.height;
,,,canvas.width =, img.width;
,,,context.drawImage (img, 0, 0);
,,,断路(画布,,(255,,255,,255,,0.2);,//,对白色进行抠除,容差为0.2
}
function 排气阀(画布,,颜色,,range =, 0), {
,,,let context =, canvas.getContext (& # 39; 2 d # 39;);
,,,let imageInfo =, context.getImageData (0, 0, canvas.width,, canvas.height);
,,,//,pixiArr是一个数组,每四个数组元素代表一个像素点,这四个数组元素分别对应一个像素的r, g, b, a值。
,,,let pixiArr =, imageInfo.data;
,,,for (let 小姐:=,0;,小姐:& lt;, pixiArr.length;,小姐:+=,4),{
,,,//,匹配到目标像素就将目标像素的alpha值设为0
,,,,,,,if (testColor ([pixiArr[我],pixiArr(小姐:+,- 1),pixiArr[小姐:+,2]],,颜色,,范围)),pixiArr[小姐:+,3],=,0;
,,,}
,,,context.putImageData (imageInfo, 0, 0);
}
function testColor(目前,,目标,范围),{
,,,for (let 小姐:=,0;,小姐:& lt;, 3;,我+ +),{
,,,,,,,if (!((1,安康;范围),*,目标[我],& lt;=,当前(我),,,,(1,+,范围),*,目标[我],祝辞=,当前[我])),return 假;
,,,}
,,,return 真实;
}
testColor(电流、目标、范围)方法三个参数分别为待检测像素点的rgb数组,目标像素点的rgb数组和容差范围,这里的容差只是简单用r, g, b的值分别乘以(1 +范围)和(1 -范围)来计算并对比,不同的容差参数会得到不同的效果,达;范围=0.095
function 排气阀(画布,,颜色,,range =, 0), {
,,,let context =, canvas.getContext (& # 39; 2 d # 39;);
,,,let imageInfo =, context.getImageData (0, 0, canvas.width,, canvas.height);
,,,let pixiArr =, imageInfo.data;
,,,for (let row =, 0;, row & lt;, canvas.height;,行+ +),{
,,,,,,,let left =, row *, 4, *, canvas.width;,//,指向行首像素
,,,,,,,let right =, left +, 4, *, canvas.width 作用;1,安康;3,,//,指向行尾像素
,,,,,,,let leftF =,假的,,//,左指针是否碰到边界的标识
,,,,,,,let rightF =,假的,,//,右指针是否碰到边界的标识
,,,,,,,while (! leftF | |, ! rightF),{,//当左右指针都为真,即都碰到边界时结束
,,,,,,,,,,,if (! leftF), {
,,,,,,,,,,,,,,,if (testColor ([pixiArr(左),pixiArr (left +, - 1), pixiArr [left +, 2]],,颜色,,范围)),{
,,,,,,,,,,,,,,,,,,,pixiArr [left +, 3],=, 0;,//,此像素的alpha值设为0
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
