我写了一个简单的例子来说明这一点.
画布大小为500px * 400px.我的图像的原始大小是200px * 160px,dpi为480.我想在画布中以原始大小显示此图像,以便不会调整大小,这会使图像模糊.
这是代码:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#canvas").width(500); $("#canvas").height(400); var canvas = $("#canvas").get(0); var ctx = canvas.getContext('2d'); var image = new Image(); image.src = "fish01.png"; // size is 200px * 160px ctx.drawImage(image,0); // same with ctx.drawImage(image,200,160); }); </script> </head> <body style="background-color: #ccc; margin: 0px;"> <canvas id="canvas" style="background-color: #66c"></canvas> </body> </html>
原始图片是:
结果是:
我认为这很奇怪,因为画布的大小是500px * 400px,图像的大小是200px * 160px,图像如何超出画布的范围?似乎图像已经调整大小.
我想知道如何显示原始大小的图像.请给出一些建议.谢谢!
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。