首页 / JAVASCRIPT / javascript – HTML画布图像的质量远低于原始图像.为什么？

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – HTML画布图像的质量远低于原始图像.为什么？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1761字，纯文字阅读大概需要3分钟。

内容图文

参见英文答案 > Html5 canvas drawImage: how to apply antialiasing                                    6个
我有一个带有图像和canvas元素的简单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);

解决方法:

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

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');
<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>

您还应该在img标记的onload侦听器中执行此操作.

内容总结

以上是互联网集市为您收集整理的javascript – HTML画布图像的质量远低于原始图像.为什么？全部内容，希望文章能够帮你解决javascript – HTML画布图像的质量远低于原始图像.为什么？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/796271.html

来源：【匿名】