Is there any way to get all data from image?-CodePudding

I tried canvas but can't find if there is any way to get all data, there is only single pixel information.

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

I'm working on image Decryption/Encryption methods, but first I want to get all image data at once, please anyone help.

CodePudding user response：

Extending on my comment...

I'm not sure what you mean by "get all image data at once" the getImageData can return as much or little as you need, and it certainly is at once, we don't need to make multiple calls, we just change the parameters.
read more:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

If you need the entire canvas you can do: 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>