有没有办法从图像中获取所有数据？

Question

我试了canvas但是找不到有没有办法获取所有数据，只有单个像素信息。

<!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>

我正在研究图像 Decryption/Encryption 方法，但首先我想一次获取所有图像数据，请大家帮忙。

Answer 1

扩展我的评论...

我不确定你所说的“一次获取所有图像数据”是什么意思要进行多次调用，我们只需更改参数即可。
阅读更多：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

如果您需要整个 canvas，您可以这样做： 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>

有没有办法从图像中获取所有数据？

Is there any way to get all data from image?

javascript

canvas

image-processing

node.js

html5-canvas