JavaScript create blank placeholder image dynamically - Stack Overflow

admin管理员组

文章数量:1344682

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)

How can I do this?

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.

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)

How can I do this?

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.

• javascript
• image

Share Improve this question Follow edited May 29, 2023 at 10:07 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 23, 2021 at 17:48 danday74danday74 57.4k5555 gold badges269269 silver badges333333 bronze badges 2

• const img = new Image(width, height) ? – 001 Commented Dec 23, 2021 at 18:03
• this fails to meet the proviso in the question but thanks anyway – danday74 Commented Dec 23, 2021 at 18:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

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)

本文标签： JavaScript create blank placeholder image dynamicallyStack Overflow