Canvas-putImageData函数的实例操作
发布于2021-10-05 20:58 阅读(808) 评论(0) 点赞(13) 收藏(2)
首先声明，该代码案例来源于：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#%E7%BC%A9%E6%94%BE%E5%92%8C%E5%8F%8D%E9%94%AF%E9%BD%BF
自己对其中的代码做了一些调整和打印。打印对于代码调试很有用的。不过框架是原来有的。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas-ImageData颜色写入</title>
</head>
<body>
<canvas id="canvas" width="300" height="227"></canvas>
<input type="radio" id="origin" name="origin"><label for="origin">origin</label>
<input type="radio" id="invert" name="invert"><label for="origin">invert</label>
<input type="radio" id="grayscale" name="grayscale"><label for="origin">grayscale</label>
</body>
<script>
//在场景中写入像素数据；ctx.putImageData(myImageData,dx,dy);
var img=new Image();
img.crossOrigin='anonymous';
img.src='./color.jpg';
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
img.onload=function(){
ctx.drawImage(img,0,0);
};
var original=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0);
};
var invert=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0);
const imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
console.log('imagedata is likee this',imageData);
const data=imageData.data;
for(var i=0;i<data.length;i+=4){
data[i]=255-data[i];
data[i+1]=255-data[i+1];
data[i+2]=255-data[i+2];
}
ctx.putImageData(imageData,0,0);
};
var grayscale=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0);
const imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
const data=imageData.data;
for(i=0;i<data.length;i+=4){
var avg=(data[i]+data[i+1]+data[i+2])/3;
data[i]=avg;
data[i+1]=avg;
data[i+2]=avg;
}
ctx.putImageData(imageData,0,0)
};
//const inputs=document.querySelectorAll('[name=color]');
const inputs=document.querySelectorAll('input');
console.log('inputs is like ',inputs);//已经获得所有input元素；
console.log('inputs no1 is like ',inputs[0]);
console.log('what we want is ',inputs[0].checked);
const labels=document.querySelectorAll('label');
console.log('label is like this ',labels);
//console.log(labels[0].textContext);//这样读出的结果是undefined；
for (const input of inputs) {
input.addEventListener("change", function(evt) {
console.log('cong');
console.log(evt.target);
console.log(evt.target.id);
console.log(evt.target.name);
console.log(evt.target.value);
console.log('evt.target.checked is ',evt.target.checked);
switch (evt.target.id) {
case "inverted":
return invert();
case "grayscale":
return grayscale();
default:
return original();
}
});
}
</script>
</html>
结果就不截图了。自己可以下载后试试。
原文链接:https://blog.csdn.net/weixin_47024922/article/details/120579425
所属网站分类: 技术文章 > 博客
作者：Hggh
链接：http://www.qianduanheidong.com/blog/article/198103/3031f0e17ee5ab5129ac/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力