Not hiding overflow:hidden data

[ankur1708]

I am using html2canvas to make 1 image out of 3-4 images. All these images can be zoomed for which i am using jquery zoom. There is one parent div holding all these images. Overflow is hidden for all these images so that user can set it as per his wish. Without zooming, on Html2Canvas, i am getting a perfect canvas element. But when any image is zoomed, and then i try HTML2Canvas, the hidden content is shown in canvas created. Is there a solution for this which i may not aware of. My functionality is similar to http://www.fotor.com/features/collage.html. Thanks in Advance.

[brcontainer]

Try this https://github.com/niklasvh/html2canvas/issues/60 or this https://github.com/niklasvh/html2canvas/issues/242

[ankur1708]

@brcontainer : I've seen that already. My case is actually li'l complicated. Just like fotor collage (link provided above) i want user to zoom an image and then create one image out of all the images. Sample: Square div containg 4 images each in one quadrant. Each quadrant has css property of overflow hidden. I want a screenshot of that div. Now if any image is zoomed, then in the screenshot the overflow-hidden part is getting rendered within the boundary of parent Square div. This cause overlapping in the zoomed image is at stacked over other images. Let me know if you need more details. Thanks.

[brcontainer]

You mean that your problem is with overlapping images instead of overflow?

[ankur1708]

It's overlapping because of overflow. Here are some screenshots to understand it better. Here is the screenshot containing a div in which 3 images are there (blue dress, white top and green pants) with no zoom. http://bit.ly/1fNjKzW . Using html2canvas on this div giving perfect canvas. Please note that every div containing image has overflow hidden in css

Here is the screenshot of div in which green pant is zoomed. http://bit.ly/1ibtDXL And here is the canvas generated by using html2canvas on the previous image. http://bit.ly/1e8190r

See that in the image 3, the hidden overflow of green pant is rendered, which cause overlapping of images. Let me know if more data is needed. Thanks.

[brcontainer]

Got it, so you're not just taking a picture of the zoom, but the entire frame (included small images and zoomed image).

What do you want to take a picture of the box, including the small photo.

Place an online sample of your problem, not the fault seems to be in html2canvas, but in your html/css.

[ankur1708]

Here is the sample of html i am using http://pastebin.com/78TJLdXL. I am calling html2canvas on 'sets_template' class. For zooming, I am using panzoon jquery plugin.

[brcontainer]

Please, post a working example.

[ankur1708]

Here is fiddle @brcontainer : http://jsfiddle.net/LCVSk/10/ The third image is zoomed by index of 2 (directly by setting matrix transfrom in html). Clicking on publish set button create canvas with overlapped image. If the zoom level is 1, then no issue is observed. Let me know if anything else is required. Thanks.

[brcontainer]

Note: Your code does not work in Firefox, partially works in google chrome.

html2canvas have a bug regarding css property -webkit-transform: matrix(...); and have a bug with z-index (with images).

Your code is relatively simple and has easier alternatives to solve this problem that do not use "css3", if you css2+javascript you will get surely create a better alternative.

[ankur1708]

Yes, images are not loading on firefox right now, but working perfect on chrome. -webkit-transform is for webkit based browsers, for firefox, transform css property is being used at my side. My bad i pasted the code from chrome console. I will try to use css2 + js and see if that fixes the issues. Thanks for your time @brcontainer

[ankur1708]

@brcontainer : I did some testing with various browsers and it looks like that probably, there is a bug with transform css property. Here is the working sample for firefox: http://jsfiddle.net/LCVSk/14/ . Here is for chrome: http://jsfiddle.net/LCVSk/13/

The issue i think is bounds/clip computation. Let me know either way. Thanks.

[brcontainer]

was what I said in last comment:

html2canvas have a bug regarding css property -webkit-transform: matrix(...); and have a bug with z-index (with images).

For this reason I said that is better css2+javascript

Try this lib: http://mark-rolich.github.io/Magnifier.js/

Works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10, in other words, this library does not need CSS3

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[Lxiaozhuang]

请问 这个解决了么 ？ 我现在也遇到了这个问题 scale放大后的图片最后在html2canvas生成图片后 隐藏的部分都显示出来了

[brcontainer]

@Lxiaozhuang In html2canvas-0.4.1 or in html2canvas-1.0?

[nishantgupta11]

-> Add CSS overflow-y: scroll; to HTML element pdfHTML -> Add attribute width & windowWidth to html2canvas method, which should be equal to width of pdfHTML Div

html2canvas(document.querySelector(".pdfHTML"), {
    width: 1350, windowWidth: 1350
}).then(canvas => {
    base64stringpdf = canvas.toDataURL("image/jpeg");
});