HTML canvas putImageData()用法及代碼示例

putImageData()方法用於將圖像數據從指定的ImageData對象放回畫布。

用法:

context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

參數值：

imgData:它用於指定ImageData對象以放回畫布。
x:它是ImageData對象左上角的x坐標。以像素為單位。
y:它是ImageData對象左上角的y坐標。以像素為單位。
dirtyX:horizontal(x)值表示將圖像放置在畫布上的位置。它以像素為單位，是可選的。
dirtyY:vertical(y)值表示將圖像放置在畫布上的位置。它以像素為單位，是可選的。
dirtyWidth:它是用於在畫布上繪製圖像的寬度。它也是可選的。
dirtyHeight:它是用於在畫布上繪製圖像的高度。它也是可選的。

例：

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h2 style="color:green;">PutImageData() Method</h2> 
        <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()">PutImageData</button> 
    </center> 
</body> 
  
</html>

輸出：
點擊之前：

單擊後：

支持的瀏覽器：下麵列出了HTML canvas putImageData()方法支持的瀏覽器：

chrome
火狐瀏覽器
Internet Explorer 9.0
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自shubham_singh大神的英文原創作品 HTML | canvas putImageData() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。