Estoy tratando de poner datos de imagen 100x100 en lienzo 1000x1000, pero no puedo hacerlo,
let width=1000; //canvas width let height=1000; //canvas height let img_w=100; //image width let img_h=100; //image height let img=new Image(); img.width=img_w img.height=img_h img.src="./flower.jpg" var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); canvas.width = width; canvas.height = height; let pixels,scannedimg; img.onload=()=>{ context.drawImage(img, 0, 0,width,height ); scannedimg = context.getImageData(0, 0, img.width, img.height); pixels=scannedimg.data console.log(pixels) redraw(); } let row=4*img_w; let col=img_h; function redraw(){ for(let i=0;i<row;i+=4){ for(let j=0;j<col;j++){ pixels[i+j*row]=0; pixels[i+j*row+1]=0; pixels[i+j*row+2]=0; //pixels[i+j*400+3]=0; } } scannedimg.data=pixels; console.log(scannedimg); context.putImageData(scannedimg,0,0,0,0,width,height); }He convertido la matriz original en una matriz de imagen negra (matriz de ceros), pero al colocarla en el lienzo, sigue siendo 100x100 ¿Cómo escalarla a 1000x1000? no quiero iterar a través de 1000x1000 y establecerlo en cero, necesito una respuesta computacionalmente eficiente
A menos que subcontrate los cálculos de píxeles a un módulo WebAssembly, un enfoque solo de JavaScript sería bastante lento para una imagen grande.
Honestamente, no estoy seguro de lo que realmente estás haciendo en tu código.
Primero, dibuje un .jpg de tamaño desconocido en un lienzo de 1000x1000 que, a menos que el .jpg también sea de 1000x1000, escalará y eventualmente distorsionará la imagen de origen.
let width=1000; let height=1000; context.drawImage(img, 0, 0, width, height);En segundo lugar, está obteniendo los datos de píxeles de una región de 100x100 desde la parte superior izquierda de su lienzo de 1000x1000.
let img_w=100; let img_h=100; img.width=img_w; img.height=img_h; scannedimg = context.getImageData(0, 0, img.width, img.height); Finalmente, en su función redraw() , está configurando aleatoriamente algunos de los píxeles en negro y los vuelve a dibujar en el lienzo a 1000x1000 (lo que no funciona de esa manera, pero lo abordaré más adelante).
Hagámoslo un poco diferente. Digamos que tenemos una imagen de 300x200. Primero, debemos dibujarlo en un lienzo de 100x100 manteniendo su relación de aspecto para obtener los datos de imagen de 100x100. Esto se puede hacer usando un elemento <canvas> fuera de la pantalla creado dinámicamente, ya que no necesitamos verlo.
Ahora la parte complicada es el método CanvasRenderingContext2D putImageData() . Supongo que estaba pensando que el último par de parámetros para el ancho y el alto estirarían los datos de píxeles existentes para llenar la región especificada por (x, y, ancho, alto). Bueno, ese no es el caso. En su lugar, debemos, nuevamente, pintar los datos de 100x100 píxeles en un lienzo fuera de la pantalla del mismo tamaño (o, por simplicidad, reutilizar el existente) y dibujarlo en el lienzo final usando el método drawImage() .
Aquí está todo junto:
let pixelsWidth = 100; let pixelsHeight = 100; let finalWidth = 500; let finalHeight = 500; let tempCanvas = document.createElement('canvas'); let tempContext = tempCanvas.getContext('2d'); tempCanvas.width = pixelsWidth; tempCanvas.height = pixelsHeight; let pixelData; let img = new Image(); img.crossOrigin = 'anonymous'; img.onload = (e) => { let scale = e.target.naturalWidth >= e.target.naturalHeight ? pixelsWidth / e.target.naturalWidth : pixelsHeight / e.target.naturalHeight; let tempWidth = e.target.naturalWidth * scale; let tempHeight = e.target.naturalHeight * scale; tempContext.drawImage(e.target, pixelsWidth / 2 - tempWidth / 2, pixelsHeight / 2 - tempHeight / 2, tempWidth, tempHeight); pixelData = tempContext.getImageData(0, 0, pixelsWidth, pixelsHeight); redraw(); } img.src = 'https://picsum.photos/id/237/300/200'; function redraw() { let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); canvas.width = finalWidth; canvas.height = finalHeight; tempContext.putImageData(pixelData, 0, 0); context.drawImage(tempCanvas, 0, 0, finalWidth, finalHeight); } canvas { background: #cccccc; } <canvas id="canvas"></canvas>La mejor manera de renderizar un ImageData mejorado es crear un ImageBitmap a partir de él.
Todos los navegadores modernos finalmente lo admiten (y si necesita soporte para navegadores más antiguos, lo tengo cubierto ).
Esto usará una ruta más rápida para representar el contenido de ImageData en un mapa de bits fácilmente disponible para ser pintado por drawImage , teóricamente mucho más rápido que la segunda mejor opción de colocar ImageData en un lienzo y volver a dibujar ese lienzo.
(async () => { // here I'll just make some noise in my ImageData const imagedata = new ImageData(100, 100); const arr = new Uint32Array(imagedata.data.buffer); for( let i = 0; i < arr.length; i++ ) { arr[i] = Math.random() * 0xFFFFFF + 0xFF000000; } // now to render it bigger const bitmap = await createImageBitmap(imagedata); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.imageSmoothingEnabled = false; // keep pixel perfect ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); })(); <canvas width="1000" height="1000"></canvas>