html2canvas border radius not applying to img tag

[faiq-naseem]

Need help, when i apply border radius to image via css, Not rendering.
See demo
http://faiqnaseem.com/html2canvas/

<style> #mydiv { width: 300px; height: 200px; background:#000; } #mydiv img { width: 200px; height: 200px; border-radius:100%; } </style>

Resultant displayed image not showing border radius,Just without radius i need to apply radius only through this method.

if i used image as background, it works but i need to put image in div tag, it is dynamically adding from database..

[faiq-naseem]

@niklasvh pls advice

[DavidBruchmann]

mhm, border radius 100%?
maybe take another unit.
No idea how 100% is interpreted by browsers here ...

On Sun, Jun 15, 2014 at 6:41 PM, faiq-naseem notifications@github.com
wrote:

@niklasvh https://github.com/niklasvh pls advice

—
Reply to this email directly or view it on GitHub
#399 (comment)
.

[faiq-naseem]

@DavidBruchmann we can use 100% but even 100px is not working

[faiq-naseem]

See demo
http://faiqnaseem.com/html2canvas/

Generated image should same as preview image

[DavidBruchmann]

ok, now I understand.
what if you use border-radius smaller than 50%?

[faiq-naseem]

nothing happens even smaller than 50%.

[DavidBruchmann]

what if you add a border like border: 1px solid black; ?

[faiq-naseem]

i want border-radius, not border only :)

Image should be rounded, which can only be done from border-radius

[DavidBruchmann]

ok, seems I can't help here.
I understand your purpose and used border-radius without border too already, just thought border could convince html2canvas too perhaps ;-)

[usmonster]

FYI, seems exactly the issue reported in #346.

[niklasvh]

Fixed

[DavidBruchmann]

Hi,

david.bruchmann@gmail.com wants to follow you.

****** Is david.bruchmann@gmail.com you friend? ******
If Yes please follow the link below:
http://invites.fliporamail.com/signup_e.html?fullname=Niklasvh/html2canvas&amp;email=reply@reply.github.com&amp;invitername=david.bruchmann@gmail.com&amp;inviterid=33170975&amp;userid=0&amp;token=0&amp;emailmasterid=8835f20a-5f9d-4f3a-900f-411dff9ee873&amp;from=david.bruchmann@gmail.com&src=txt_yes

If No please follow the link below:
http://invites.fliporamail.com/signup_e.html?fullname=Niklasvh/html2canvas&amp;email=reply@reply.github.com&amp;invitername=david.bruchmann@gmail.com&amp;inviterid=33170975&amp;userid=0&amp;token=0&amp;emailmasterid=8835f20a-5f9d-4f3a-900f-411dff9ee873&amp;from=david.bruchmann@gmail.com&src=txt_no

Follow the link below to remove yourself from all such emails
http://invites.fliporamail.com/uns_inviter.jsp?email=reply@reply.github.com&amp;iid=8835f20a-5f9d-4f3a-900f-411dff9ee873&amp;from=david.bruchmann@gmail.com

[uaison]

I met the same problem with you, and then, have you solve the problem?

[uaison]

The following functions can solve this problem:
function CanvalHD(canvasThis,ctxThis){
(function (canvas, ctx) {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStorePixelRatio;
if (devicePixelRatio !== backingStorePixelRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
ctx.scale(ratio, ratio);
}
})(canvasThis, ctxThis);
}

This is due to the different of screen pixels ratio, iPhone screen is 2, PC display is 1, and Android screen is 1.5,
See the website:
http://segmentfault.com/q/1010000002533478