我嘗試了畫布，但找不到是否有任何方法可以獲取所有資料，只有單個像素資訊。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
function copy() {
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 20, 20);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>我正在研究影像解密/加密方法，但首先我想一次獲取所有影像資料，請大家幫忙。
uj5u.com熱心網友回復：
擴展我的評論...
我不確定您所說的“一次獲取所有影像資料”是什么意思，getImageData 可以根據您的需要回傳多少，而且肯定是一次，我們不需要進行多次呼叫，我們只需更改引數。
閱讀更多：
https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
如果您需要整個畫布，您可以執行以下操作：
ctx.getImageData(0, 0, c.width, c.height)
var output = document.getElementById("output");
var ctx_output = output.getContext("2d");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);
ctx.fillRect(99, 20, 20, 20);
function copy() {
var imgData = ctx.getImageData(0, 0, c.width, c.height);
ctx_output.putImageData(imgData, 0, 0);
}<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3f3939;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<button onclick="copy()">Copy</button>
<br>
<canvas id="output" width="200" height="100" style="border:1px solid #0000ff;">
Your browser does not support the HTML5 canvas tag.</canvas>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/462344.html
標籤：javascript 节点.js 图像处理 帆布 html5-画布
上一篇：從影像中找到小缺陷
下一篇：計算中心差