Canvas-putImageData函数的实例操作-前端黑洞网

本站消息

站长简介/公众号

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

Hggh

984

文章

601157

访问

+关注

分类

暂无分类

日期归档

2023-05(8)

2023-06(3)

Canvas-putImageData函数的实例操作

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