Probé canvas pero no puedo encontrar si hay alguna forma de obtener todos los datos, solo hay información de un solo píxel.
<!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>Estoy trabajando en métodos de descifrado/cifrado de imágenes, pero primero quiero obtener todos los datos de imágenes a la vez, por favor, alguien me ayuda.
Ampliando mi comentario...
No estoy seguro de lo que quiere decir con "obtener todos los datos de imagen a la vez", getImageData puede devolver tanto o tan poco como necesite, y ciertamente es a la vez, no necesitamos hacer varias llamadas, solo cambiamos el parámetros
Lee mas:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
Si necesita todo el lienzo, puede hacerlo: 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>