HTML | canvas getImageData() 方法

getImageData() 方法用于复制画布上指定矩形的像素数据。

ImageData 对象中的每个像素都有 4 条信息，即 RGBA 值：

• R 表示红色。它的范围从 0 到 255。
• G表示绿色。它的范围从 0 到 255。
• B表示蓝色。它的范围从 0 到 255。
• A 表示 alpha 通道。它的范围也从 0 到 255，即 0 是透明的，255 是完全可见的

句法：

context.getImageData(x, y, width, height);

参数值：

• x：用于指定从哪里开始复制的左上角的x 坐标（以像素为单位）。
• y：用于指定要开始复制的左上角的 x 坐标（以像素为单位）。
• width：要复制的矩形区域的宽度。
• height：要复制的矩形区域的高度。

例子：

  

  
     GeeksforGeeks
     GetImageData() Method
    
    
  
    
        var gfg = document.getElementById("gfgCanvas");
        var context = gfg.getContext("2d");
        context.fillStyle = "green";
        context.fillRect(55, 50, 200, 100);
  
        function putImage() {
            // getImageData is used to copy the pixels
            var imageData = context.getImageData(55, 50, 200, 100);
            context.putImageData(imageData, 55, 170);
        }
    
    
    GetImageData
  

  

输出：
点击前：

点击后：

支持的浏览器：

• 铬合金
• 火狐浏览器
• 浏览器 9.0
• 歌剧
• 苹果浏览器