Question

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

为什么画布不能自动调整原始图像源分辨率？见下图plz整个画面没有在画布上显示。

enter image description here

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

Answer 1

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

如果未定义尺寸，Canvas默认为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);

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

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

如何在画布上看到整张图片的原始分辨率，而不会失去质量？

1 个答案: