Necesito crear dinámicamente una imagen de marcador de posición en blanco en JavaScript, ancho y alto desconocidos hasta el tiempo de ejecución.
La imagen generada debe ser completamente transparente con las dimensiones dadas en formato PNG.
Es importante que la imagen generada real tenga las dimensiones dadas, simplemente establecer los atributos de ancho y alto de la etiqueta img generada no es suficiente.
Necesito algo como esto:
const createImage = (width, height) => { const img = new Image() // img must have width and height in px as specified (see above proviso) // img must also be a transparent PNG return img } const img1 = createImage(100, 100) const img2 = createImage(640, 480)¿Alguna idea de como hacer esto? AIT
PD: sé que probablemente podría encontrar un servicio en línea que haga esto por mí, pero quiero evitar la sobrecarga de una llamada HTTP para obtener la imagen.
Puede usar un lienzo HTML y llenarlo con un rectángulo transparente, luego convertirlo en una URL de datos y adjuntarlo a un elemento de imagen.
const createImage = (width, height) => { const canvas = document.createElement('canvas') canvas.width = width canvas.height = height const ctx = canvas.getContext('2d') ctx.fillStyle = 'rgba(0, 0, 0, 0)' ctx.fillRect(0, 0, width, height) const img = new Image(width, height) img.src = canvas.toDataURL() return img } const img1El = document.getElementById('img1') const img2El = document.getElementById('img2') const img1 = createImage(100, 50) const img2 = createImage(20, 50) img1El.src = img1.src img2El.src = img2.src #img1 { border: 1px solid red; } #img2 { border: 1px solid blue; } <img id="img1"> <img id="img2"> <div>Right click an image above and select Save image as...</div>Estabas cerca, el primer y segundo argumento del constructor de la imagen son el ancho y el alto:
const createImage = (width, height) => { const img = new Image(width, height) return img } const img1 = createImage(100, 100) const img2 = createImage(640, 480) document.body.append(img1, img2)function createImage(width, height) { let img = document.createElement('img'); img.style.minWidth = `${width}px`; img.style.minHeight = `${height}px`; return img; } const img1 = createImage(100, 100) const img2 = createImage(640, 480) document.body.appendChild(img1)