TypeError：Failed to execute 'readAsDataURL' on 'FileReader' : parameter 1 is not of type 'Blob'

[lee-yong-dae]

Use case: description, code

Actual behavior (stack traces, console logs etc)

Library version

3.2.0

Browsers

• Chrome 49+

[Marc Brooks]

Please create a simple repro on jsfiddle

[Lance Pollard]

I am getting this too.

dom-to-image-more.js:868 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    at n.onreadystatechange (dom-to-image-more.js:868:33)

The other lib is working: https://www.npmjs.com/package/dom-to-image

const SAMPLE = `\\documentclass[preview]{standalone}
\\usepackage{amsmath}
\\begin{document}
\\begin{equation*}
L = 2
\\end{equation*}
\\end{document}
`

function Body() {
  const files = {}
  const [text, setText] = useState(SAMPLE)
  const [preview, setPreview] = useState<File>()
  const ref = useRef<HTMLDivElement>(null)

  const renderLatex = async () => {
    const blob = (await domtoimage.toBlob(ref.current)) as string
    console.log('done', blob)
    downloadBlob(blob, 'html.png')

    const file = await task.convert({
      input: {
        format: 'tex',
        file: {
          content: text,
        },
      },
      output: {
        format: 'png',
      },
    })

    setPreview(file)
  }

  return (
    <div
      ref={ref}
      className="px-16 flex flex-col gap-16"
    >
      <Field className="h-2-3-screen-minus-nav">
        <Label color="purple">Latex</Label>
        <TextEditor
          language="latex"
          heightClassName="flex-1"
          height="100%"
          theme="purple"
          value={text}
          onChange={v => setText(v ?? '')}
        />
      </Field>
      <div className="flex justify-center p-16">
        <Button onClick={renderLatex}>Render</Button>
      </div>
      {preview && (
        <Field>
          <Label color="blue">Image</Label>
          <BufferImage content={preview} />
        </Field>
      )}
    </div>
  )
}

[Marc Brooks]

How about a simple JSFiddle, please?

[Nishan Budhathoki]

Looks like there is something wrong with OKLCH color parsing! I am using daisyUI 4 and I am facing the same error while trying to generate a canvas from a part of HTML! Not sure about it though!

[veera-ui]

I'm using dom-to-image-more plugin for taking screenshot for Web app. I'm facing this issue TypeError：Failed to execute 'readAsDataURL' on 'FileReader' : parameter 1 is not of type 'Blob' , kindly help me to resolve this issue.

[Cell]

I am getting this too. When I try to take screenshot for updated icon in my app.

Emm... I try to get you a demo “dom-to-image vs dom-to-image-more”, but this problem is OK in my demo, but I don’t know what to do. Oops!

After constant testing I found the culprit! cacheBust: true, See the demo “dom-to-image vs dom-to-image-more”.

[Chris McDonald]

Just a bit more info to help us get something reproduceable.

I was getting the same error when there was an img tag nested inside the screenshotted node that had a bad URL as the src. Once all img tags had valid URLs as their sources, the error went away and the export was able to complete successfully.

I couldn't reproduce this in JS Fiddle, but I'll share my setup regardless.
https://jsfiddle.net/crobin/d9s8o6ch/