canvas—像素操作

canvas 像素操作

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

 API介绍：

• ImageData 对象：
  ImageData对象中存储着canvas对象真实的 像素数据，它包含以下几个只读属性：
  
  • width：图片宽度，单位是像素。
  • height：图片高度，单位是像素。
  • data：Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）
• 创建 ImageData 对象：

  var myImageData = ctx.createImageData(width, height); // 创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑, rbga为(0,0,0,0) 。

• 获取画布上 某个区域的 ImageData 对象：
  为了获得一个包含画布场景像素数据的ImageData对像，你可以用getImageData()方法

  var myImageData = ctx.getImageData(left, top, width, height); 

• 在画布上写入 像素数据
  你可以用putImageData()方法去对场景进行像素数据的写入。

  ctx.putImageData(myImageData, dx, dy);  // dx，dy 就是写入画布的坐标位置  

• 保存图片：
  • toDataURL：默认设定。创建一个 PNG 图片。
    也可以自定义 图片格式 和 图片质量，如

    var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
    // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
    var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
    var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

  • toBlob：这个创建了一个在画布中的代表图片的 Blob 对象。

    const canvas = document.getElementById("canvas");
    
    canvas.toBlob((blob) => {
      const newImg = document.createElement("img");
      const url = URL.createObjectURL(blob);
    
      newImg.onload = () => {
        // 不再需要读取该 blob，因此释放该对象
        URL.revokeObjectURL(url);
      };
    
      newImg.src = url;
      document.body.appendChild(newImg);
    });

     

实例代码：

   const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.fillStyle = "red"
    ctx.fillRect(0,0,100,100)
    ctx.closePath()

    // 拷贝 画布中指定区域的像素数据。 
    const copy = ctx.getImageData(0,0,30,30)
    console.log(copy);
    
    // 将像素数据，写入到画布指定区域
    ctx.putImageData(copy, 200,200)