Javascript 我怎样才能在画布上看到整个图片的原始分辨率，而不失去质量？_Javascript_Css_Html_Canvas

Javascript 我怎样才能在画布上看到整个图片的原始分辨率，而不失去质量？

javascript css html canvas

Javascript 我怎样才能在画布上看到整个图片的原始分辨率，而不失去质量？,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我有一个随机图片框（高清图片），现在我需要复制到画布上，而不会丢失宽度、高度和质量。当我试着跟随时，在画布上我并没有得到img标签的全貌为什么画布不能自动调整大小到原始图像源分辨率？请看下面的plz，整个图片未显示在画布中 <!DOCTYPE html> <html> <body> <p>1. Random Images:</p> <img id="scream" src="http://3.bp.blogspot.com/-

我有一个随机图片框（高清图片），现在我需要复制到画布上，而不会丢失宽度、高度和质量。当我试着跟随时，在画布上我并没有得到img标签的全貌

为什么画布不能自动调整大小到原始图像源分辨率？请看下面的plz，整个图片未显示在画布中

<!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>


一,。随机图像：
二,。画布：将显示相同的图片宽度、高度
您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
ctx.drawImage（img，0,0）；

首先设置画布的大小，然后绘制图像，或者使用扩展参数绘制图像，以填充画布的大小

如果未定义大小，画布默认为300 x 150像素：

选项1

c.width = img.width;
c.height = img.height
ctx.drawImage(img,0,0);

选项2:

ctx.drawImage(img,0,0, c.width, c.height);

您还可以在画布元素本身上设置大小（不要为此使用CSS）：


您的浏览器不支持HTML5画布标记。

<canvas id="myCanvas" width=500 height=400
        style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>