本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(17)

2021-06(90)

2021-07(5)

2021-08(60)

2021-09(68)

Canvas-putImageData函数的实例操作

发布于2021-10-05 20:58     阅读(390)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

13 0
收藏该文
已收藏

评论内容:(最多支持255个字符)