I need to dynamically create a blank placeholder image in JavaScript, width and height unknown until runtime.
The generated image should be fully transparent with the dimensions given in PNG format.
It is important that the actual generated image itself has the dimensions given, merely setting the width and height attributes of the generated img tag is not sufficient.
I need something like this:
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)
Any ideas how to do this? TIA
PS I know I could probably find an online service to do this for me but I want to avoid the overhead of an HTTP call to get the image.
You can use an HTML Canvas and fill it with a transparent rectangle, then convert it to a data url and attach it to an Image element.
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>You were close, the first and second arguments of the Image constructor are the width and height:
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)