canvas putImageData()

admin發表於2018-08-09
Canvas

putImageData方法會將影像資料繪製到畫布，影像資料是ImageData物件。

通常和getImageData()方法配合使用，具體參閱canvas getImageData操作畫素一章節。

語法結構一：

[JavaScript] 純文字檢視 複製程式碼
ctx.putImageData(imagedata, dx, dy);

引數解析：

（1）.imagedata：包含影像資料的一個物件，關於此物件參閱canvas getImageData操作畫素一章節。

（2）.dx：源影像資料在目標畫布中的位置偏移量（x 軸方向的偏移量）。

（3）.dy：源影像資料在目標畫布中的位置偏移量（y 軸方向的偏移量）。

程式碼例項中，我們會使用如下圖片：

1.png

特別說明：圖片的每一個方格的尺寸103x33畫素。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    ctx.putImageData(imgData, 0, 0);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/mybg.png"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼可以將源資料放置於畫布上，開始防止的座標是（0，0）。

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

引數解析：

（1）.imagedata:包含影像資料的一個物件，關於此物件參閱canvas getImageData操作畫素一章節。

（2）.dx:源影像資料在目標畫布中的位置偏移量（x 軸方向的偏移量）。

（3）.dy:源影像資料在目標畫布中的位置偏移量（y 軸方向的偏移量）。

（4）.dirtyX:在源影像資料中，矩形區域左上角的位置。預設是整個影像資料的左上角（x 座標）。

（5）.dirtyY:在源影像資料中，矩形區域左上角的位置。預設是整個影像資料的左上角（y 座標）。

（6）.dirtyWidth:在源影像資料中，矩形區域的寬度。預設是影像資料的寬度。

（7）.dirtyHeight:在源影像資料中，矩形區域的高度。預設是影像資料的高度。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    ctx.clearRect(0, 0, 738,280);
    ctx.putImageData(imgData, 20, 20,103,33,206,66);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/mybg.png"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼演示第二種語法結構，下面做一下分析。

[JavaScript] 純文字檢視 複製程式碼
ctx.putImageData(imgData, 20, 20,103,33,206,66);

我們規定從畫布（20,20）開始繪製資料，然而實際的表現看起來遠大於這個座標:

2.jpg

其實這並沒有錯，因為我們規定從源資料（103,33）位置開始讀取資料，那麼很自然沒有讀取的部分顯示為空白。

相關文章