Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

html2canvas not work when the html contains a canvas element #1311

Closed
mengwuhen opened this Issue Dec 13, 2017 · 16 comments

Comments

Projects
None yet
10 participants
@mengwuhen
Copy link

mengwuhen commented Dec 13, 2017

Bug reports:

I am using html2canvas in a react Project. I found that html2canvas not work when the html contains a canvas element. The canvas area will show empty.

Specifications:

this is the html picture
image

this is the convert to canvas picture

image

in the canvas area , I use 'echarts-for-react' to draw a Radar map。But when I clcik Generate pictures Button , the dowload picture is not complete

  • html2canvas version tested with: 1.0.0-alpha.4
  • Browser & version: Chrome 60.0.3112.7
  • Operating system: windows
@bigfacewo

This comment has been minimized.

Copy link

bigfacewo commented Dec 13, 2017

I have the same problem.

@niklasvh

This comment has been minimized.

Copy link
Owner

niklasvh commented Dec 13, 2017

Could you share an example on jsfiddle?

@outerbound

This comment has been minimized.

Copy link

outerbound commented Dec 14, 2017

same problem. i have chartjs graphs on page, they are no longer rendering. used to render in previous version

@outerbound

This comment has been minimized.

Copy link

outerbound commented Dec 14, 2017

I have created a fiddle to show the problem
https://jsfiddle.net/outerbound/v7p71wzr/

This is not working on chrome :( , I can confirm on safari it working :)

@niklasvh niklasvh added Bug and removed Needs More Information labels Dec 14, 2017

@ZeroGravity100500

This comment has been minimized.

Copy link

ZeroGravity100500 commented Dec 14, 2017

problem is in removing container form DOM before rendering

@JasonDung

This comment has been minimized.

Copy link

JasonDung commented Dec 15, 2017

I have the same problem. marker...

@bigfacewo

This comment has been minimized.

Copy link

bigfacewo commented Dec 15, 2017

Maybe html2canvas can not work with gridstack.js

@enanchen

This comment has been minimized.

Copy link

enanchen commented Dec 19, 2017

Had the same problem with using chart.js with vue(vue-chart.js) and it only happens in Chrome

@Nemo0915

This comment has been minimized.

Copy link

Nemo0915 commented Dec 19, 2017

I have the same problem, html2canvas can not work with gridstack.js, when i use html2canvans with gridstack, all elements get stacked at the top.
image

@bigfacewo

This comment has been minimized.

Copy link

bigfacewo commented Dec 19, 2017

@Nemo0915 I build a jsfiddle with gridstack.js, but it's work fine.So maybe that is not gridstack.js's problem,but i am not very sure.

@ArrayZheng

This comment has been minimized.

Copy link

ArrayZheng commented Dec 20, 2017

same problem,Firefox is ok but Chorme can not work

@Nemo0915

This comment has been minimized.

Copy link

Nemo0915 commented Dec 20, 2017

@bigfacewo thanks for your reply,it's the screenshot of your jsfiddle, the button has been stacked to the top too, and the result is same whether in FF or Chrome.
image

@bigfacewo

This comment has been minimized.

Copy link

bigfacewo commented Dec 20, 2017

@Nemo0915 I found the 0.5.0-beta4 version work normal,jsfiddle. the screenshot is:
qq 20171220150328
The 1.0.0-alpha4 version,jsfiddle,it's can not work on chrome, But i didn't find the problem that the elements were stacked on the top. this is the screenshot on Firefox:
qq 20171220150946

Chrome version:63.0.3239.108
Firefox version:57.0.2

@IxAres

This comment has been minimized.

Copy link

IxAres commented Dec 20, 2017

you can add option: removeContainer: false to fixed this problem temporarily....

@enanchen

This comment has been minimized.

Copy link

enanchen commented Dec 20, 2017

Thanks @IxAres, it solves my problem.

@niklasvh

This comment has been minimized.

Copy link
Owner

niklasvh commented Dec 21, 2017

Fixed in 38749bc

@niklasvh niklasvh closed this Dec 21, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.