How can I see in canvas the whole picture original resolution, without loosing quality?
Question
I have a random picture box (HD Pictures) now I need to copy it to a canvas without losing width, height, quality. When I tried following, in canvas I do not get the whole picture of img tag.
Why is the canvas not auto re-sizing to original image source resolution? see below plz whole picture is not showing in canvas.
<!DOCTYPE html>
<html>
<body>
<p>1. Random Images:</p>
<img id="scream" src="http://3.bp.blogspot.com/-ToLa13yet6E/Ugd2yrThMDI/AAAAAAAAAHY/3tAOipAts4c/s1600/tree3.jpg" alt="The Scream" width="220" height="277">
<p>2. Canvas: will show the same picture width, height</p>
<canvas id="myCanvas"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
</script>
</body>
</html>
1 answers
solution1
2 ACCPTED
Set first the size of the canvas, then draw the image - or - draw the image using extended arguments to fill the canvas at whatever size it is at.
Canvas defaults to 300 x 150 pixels if no size is defined:
Option 1
c.width = img.width;
c.height = img.height
ctx.drawImage(img,0,0);
Option 2:
ctx.drawImage(img,0,0, c.width, c.height);
You can also set the size on the canvas element itself (don't use CSS for this):
<canvas id="myCanvas" width=500 height=400
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.