Question

我有一个带有图像和画布元素的简单HTML文档。图像src只是在线发现的一些高质量图像，只是为了说明我的观点。当我尝试将图像绘制到画布上时，生成的画布图像非常像素化且质量低。我似乎无法弄清楚原因。这里也提出了类似的问题，但我找不到似乎可以解决问题的答案。如果有人找到另一个有工作答案的帖子，请告诉我。任何帮助是极大的赞赏。提前谢谢！

这是JSfiddle的代码： https://jsfiddle.net/vey309b0/5/

HTML：

<p>the original image:</p>
<img id="img_cam" src="https://4.bp.blogspot.com/k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400">
<p>the canvas with drawn image:</p>
<canvas id="imgcanvas" width="400"></canvas>

JavaScript的：

var canvas = document.getElementById("imgcanvas");
var img_can = document.getElementById("img_cam");
var ctx = canvas.getContext("2d");
var imgWidth = img_can.width;
var imgHeight = img_can.height;
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img_can, 0, 0, imgWidth, imgHeight);

Answer 1

将画布的宽度和高度设置为图像的naturalWidth和naturalHeight，然后使用CSS约束画布大小。

＆＃13;

var canvas = document.getElementById("imgcanvas");
var ctx = canvas.getContext("2d");
var img_can = document.getElementById("img_cam");
img_can.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
};
img_can.src = img_can.getAttribute('data-src');

＆＃13;

<p>
the original image:
</p>
<img id="img_cam" data-src="https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400">
<p>
the canvas with drawn image:
</p>
<canvas id="imgcanvas" style="width:400px;"></canvas>

＆＃13;

你也应该在img标签的onload监听器中真正做这项工作。

HTML画布图像的质量远低于原始图像。为什么？

1 个答案: