qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://toolpkg.com/html-to-image
MIT License
504 stars 36 forks source link

placeholderImage as a callback #5

Closed nextend closed 1 year ago

nextend commented 1 year ago

I would like to replace images which was unable to load for the screenshot (mostly CORS errors). I would like to generate grey area where these images are. What I would need is a callback for placeholderImage where the first parameter is the original img element.

placeholderImage: (imgElement){
    return 'Get the size of the imgElement and generate a grey image with that size.';
}

Another idea: replace the img tag in the cloned document with a simple div with styling.

qq15725 commented 1 year ago

Have supported

<img src="error.webp" style="width: 100px; height: 100px;">
{
  fetch: {
    placeholderImage: cloned => {
      const div = document.createElement('div')
      div.style.background = 'grey'
      div.style.display = 'inline-block'
      for (let i = cloned.style.length - 1; i >= 0; i--) {
        const name = cloned.style.item(i)
        div.style.setProperty(
          name,
          cloned.style.getPropertyValue(name),
          cloned.style.getPropertyPriority(name),
        )
      }
      cloned.parentNode?.insertBefore(div, cloned)
      return 'data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
    },
  },
}