绘制到html画布中的png图像质量不佳
调节器
我正在尝试将png图像绘制到画布中，但是质量确实很差。我正在使用drawImage方法：
src = folder+self.cur+".png";
imageObj.src = src;
imageObj.onload = function() {
context.clearRect(0, 0, cv, ch), context.drawImage(imageObj, 0, 0, cv, ch)
};
随附原始图像和结果在屏幕快照中的屏幕快照。现在，画布尺寸与图像相同，因此问题不是由调整大小引起的。
有什么想法导致此问题以及如何解决？这是一个例子。
用户名
问题
主要错误是您未指定canvas元素的大小-您仅指定元素本身的CSS大小，这意味着canvas上下文将以默认大小300 x 150像素工作。
这将导致您显示的图像先缩小到300 x 150，然后再通过CSS放大到您想要的大小（但没有大小），从而产生模糊的外观。
解
要解决此问题，您需要专门在canvas元素上设置尺寸（以CSS像素为单位），而不要使用CSS规则：
#mapCanvas{
/*width:664px; Delete these
height:980px; */
}
并直接在canvas元素上将它们设置为属性而不是CSS：
<canvas id='mapCanvas' width=664 height=980></canvas>
您可以选择使用JavaScript进行设置
mapCanvas.width = 664; /// use integer values
mapCanvas.height = 980;
然后绘制图像。如上面的注释中所述，代码中也有错别字，如果您不调整图像大小，则无需指定图像的宽度和高度。
后者可以帮助您解决此问题-如果您将它们遗漏掉，则在这种情况下您会看到图像绘制得很大，表明画布的尺寸设置不正确。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
tabBarItem图像质量不佳
- 2
PIL中的PNG图像质量
- 3
android中缩放图像时图像质量不佳
- 4
使用JCrop裁剪图像绘制到画布中
- 5
使用JCrop裁剪绘制到画布中的图像
- 6
如何获得高质量的画布到 PNG 的转换
- 7
在画布中绘制方形图像
- 8
HTML 画布：旋转和平移图像以将图像中的点固定到画布中的坐标
- 9
将Svg绘制到画布上，包括嵌入到svg中的图像
- 10
HTML画布中的绘制顺序
- 11
html画布可以绘制上传的图像吗？
- 12
在画布上绘制图像并导出打印质量图像
- 13
画布-从原型中绘制图像
- 14
HTML + CSS到png图像
- 15
画布宽度和高度均为100％时质量不佳
- 16
画布HTML5中绘制图像对象的限制区域
- 17
无法在Phonegap中的HTML5画布上绘制图像
- 18
将在画布上绘制的图像的坐标保存在变量/对象-HTML5中
- 19
如何使用 JavaScript 在 html 画布中为特殊过滤器绘制图像
- 20
使用回调将图像绘制到画布的Javascript
- 21
将两个图像的差异绘制到画布
- 22
用JavaScript加载并绘制平铺图像到画布
- 23
为什么当我用CGContextDrawImage绘制PNG图像时，它会调整大小并在UIImageView中很好地显示，但是质量不好
- 24
fillRect在HTML画布中绘制错误的形状
- 25
继续在HTML画布中绘制线条
- 26
在HTML画布中定位绘制的形状
- 27
绘制到选定的画布
- 28
将图像绘制到画布上会为每个绘制的新图像返回InvalidStateError，然后成功
- 29
html5画布绘制多个图像
我来说两句