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

[LeeYongDae]

Use case: description, code

Actual behavior (stack traces, console logs etc)

Library version

3.2.0

Browsers

• Chrome 49+

[IDisposable]

Please create a simple repro on jsfiddle

[lancejpollard]

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>
  )
}

[IDisposable]

How about a simple JSFiddle, please?

[nishanbudhathoki2266]

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.

[Lruihao]

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-dev]

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/

[iamsank8]

I am using the package in multiple projects for doing the same stuff.
However, it is not working in a single project.
How do I collect relevant data so I can share it here for debugging?

I am using it in the below project config:
Angular@14
[email protected]
[email protected]
@recogito/[email protected]

[IDisposable]

Ideally you need to build a JSFiddle with a simple reproduction. At minimum, would need a better description than "not working". In what way does it fail? Are there any console.log messages? Does the image capture, but doesn't look right?

Also, we're still at the mercy of a non-tainted canvas, so please read up on that...

[ITfanheng]

我也得到了这个。当我尝试为应用程序中的更新图标截取屏幕截图时。

嗯......我试图给你一个演示 “dom-to-image vs dom-to-image-more”，但这个问题在我的演示中没问题，但我不知道该怎么办。哎呀！

经过不断的测试，我找到了罪魁祸首！，请参阅演示 “dom-to-image vs dom-to-image-more”。cacheBust: true

@IDisposable you can use this demo, choose file path like 'C:\Program Files (x86)\test.jpg', click download more, then you can get this error message

[IDisposable]

I don't expect a browser plug-in to be able to access Windows file system, especially not Program Files