dimanche 27 avril 2014

HTML5 - toile d'image : comment garder les proportions - Stack Overflow


This my test code: http://jsfiddle.net/Zx4fg/


Why does the circle look like an oval on the canvas?


I want save snapshot from webcam to an image, but the resulting image does not keep proportions.


My real code is:


ctx.drawImage(video,0,0, 300, 150); // 300х150 - with this prop. image 
//from webcam on canvas with true proportions
$('body').append($('<img>').attr('src', canvas.toDataURL()));

And I getting like this:





The problem is in canvas styling, u should set its width and height attribute in HTML. not in CSS


<canvas id="canvas" width="320" height="2400" style="border:1px solid #d3d3d3;">


This my test code: http://jsfiddle.net/Zx4fg/


Why does the circle look like an oval on the canvas?


I want save snapshot from webcam to an image, but the resulting image does not keep proportions.


My real code is:


ctx.drawImage(video,0,0, 300, 150); // 300х150 - with this prop. image 
//from webcam on canvas with true proportions
$('body').append($('<img>').attr('src', canvas.toDataURL()));

And I getting like this:




The problem is in canvas styling, u should set its width and height attribute in HTML. not in CSS


<canvas id="canvas" width="320" height="2400" style="border:1px solid #d3d3d3;">

Related Posts:

0 commentaires:

Enregistrer un commentaire