niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.47k stars 4.8k forks source link

Isue with DaisyUI plugin #3130

Open dovaldev opened 10 months ago

dovaldev commented 10 months ago

Bug reports:

I have been using html2canvas for a while and everything was working fine, until I tried DaisyUI and then I started having a rendering issue with the color. If you use that library, you will encounter problems when generating the canvas:

Attempting to parse an unsupported color function oklch ...

Specifications:

thelfensdrfer commented 10 months ago

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

aksar9211 commented 10 months ago

Facing the same issue.

Have you got any workarounds?

dovaldev commented 10 months ago

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

Updated. Thanks! :)

dovaldev commented 10 months ago

Facing the same issue.

Have you got any workarounds?

I uninstalled DaisiUI and installed another alternative Tailwind library.

thelfensdrfer commented 10 months ago

Have you got any workarounds?

The best solution I could come up with was using a simplified stylesheet without daisyui. So same as @dovaldev.

aksar9211 commented 10 months ago

I've downgraded the DaisyUI version from 4x to 3.9.4. Now everything is working fine.

iyansr commented 10 months ago

I've downgraded the DaisyUI version from 4x to 3.9.4. Now everything is working fine.

Thanks, working for me

brerdem commented 9 months ago

When I installed 3.9.4 instead of 4.x, it worked for me too but it would be great if the maintainers add support for new color specs. Downgrading isn't an ideal solution

yosefebrahimi7 commented 9 months ago

hi please help me toooo!

**Uncaught (in promise) Error: Attempting to parse an unsupported color function "oklch"**

semiautomatix commented 8 months ago

Really? DaisyUI is basically my only option?

sksizer commented 7 months ago

I have got a branch that has a patch applied in source code that deals and converts the oklch values, that is working but I haven't done any of the work to add unit testing and the like.

yorickshan commented 6 months ago

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

use https://www.npmjs.com/package/html2canvas-pro, it supports color function oklch!

sksizer commented 6 months ago

The unsupported color function is oklch. Don't know why you decided to leave out the most important part 😉

use https://www.npmjs.com/package/html2canvas-pro, it supports color function oklch!

Awesome!

NgallaJuke commented 2 months ago

Instead of install html2canvas, install htmlcanvas-pro It support the oklch just like @yorickshan said But I'm facing another issue. I have a simple div with a paragraph in it. when the pdf is generated, the paragraph is pushed down outside the div

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

How it looks on the page image

how it looks on the pdf image

yorickshan commented 2 months ago

Instead of install html2canvas, install htmlcanvas-pro It support the oklch just like @yorickshan said But I'm facing another issue. I have a simple div with a paragraph in it. when the pdf is generated, the paragraph is pushed down outside the div

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

How it looks on the page image

how it looks on the pdf image

I didn't reproduce the issue using the latest version (1.5.6). Please feel free to submit a detailed issue to html2canvas-pro, preferably with a minimal demo.