Html2canvas: Image with border-radius does't work

Created on 7 Mar 2014  路  6Comments  路  Source: niklasvh/html2canvas

Images with border radius appear as a square. I tryed adding 1px border with color and transparent to force the border.

I also tryed with a wrapper div with the border and overflow:hidden, but it doesn't work either.

Is this a bug? There any CSS trick to solve it?

Bug

All 6 comments

by what you said seems to be a bug, but put a test case of the problem to understand how you are working the html.

I made this jsfindle but it's not working because of the external images I guess. But it is enough to show an example of what I tested.

Dirty trick: By the moment, I changed the images for background images.

Is really a BUG, not rendering images with border-radius.

The div#test2 can render, but the image overlaps it.

@niklasvh occurs also on 5.0-rc1

Should be fixed

@niklasvh hello,I use v1.0.0-alpha.10,and I still have this problem~

Has this issue been resolved? I am trying to download an image from a canvas element that has a border-radius but the saved image (from canvas.todataurl()) is square.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dking3876 picture dking3876  路  4Comments

tibewww picture tibewww  路  4Comments

rrutkows picture rrutkows  路  4Comments

ABHIKSINGHH picture ABHIKSINGHH  路  3Comments

yasergh picture yasergh  路  5Comments