Quiero crear una imagen negra (o blanca, realmente no me importa el "color") de 1x1px en javascript, intenté hacerlo con var img = new Image(1,1) pero no sé cómo asignar el fuente de la imagen con img.src para que sea todo negro (no quiero usar un archivo, quiero que se genere con código JS).
¿Hay una manera de hacer eso?
Lo encontré:
var image = document.createElement('canvas').getContext('2d').getImageData(0,0,1,1);
Dejaré la pregunta abierta para saber si hay otra forma de hacerlo.
Fuentes que utilicé:
De manera similar, puede realizar la manipulación de la imagen en el lienzo, luego pasar un URI de datos que contiene una representación de la imagen a la imagen HTML para la representación real.
const imgWidth = 1; const canvas = document.createElement("canvas"); canvas.width = imgWidth; canvas.height = imgWidth; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.fillRect(0,0,imgWidth,imgWidth); const url = canvas.toDataURL(); const newImg = document.createElement("img"); newImg.src = url; document.body.insertBefore(newImg, null);También puede usar datos base64 encoded en image.src .
var image = new Image(10, 10); image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="; document.body.appendChild(image);