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：是要复制的矩形区域的高度。

例：

<!DOCTYPE html> 
<html> 
  
<body> 
  
    <h3 style="color:green; "> GeeksforGeeks</h3> 
    <h3 style="color:green; "> GetImageData() Method</h3> 
    <canvas id="gfgCanvas" 
            width="300" 
            height="300"
            style="border:1px solid ;"> 
    </canvas> 
  
    <script> 
        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); 
        } 
    </script> 
    <br> 
    <button onclick="putImage()">GetImageData</button> 
  
</body> 
  
</html>

输出：
点击之前：

单击后：

支持的浏览器：

chrome
火狐浏览器
Internet Explorer 9.0
Opera
苹果浏览器

相关用法

注：本文由纯净天空筛选整理自shubham_singh大神的英文原创作品 HTML | canvas getImageData() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。