Canvas 在高清屏下绘制图片变模糊的解决方法
2017-07-24 15:08
906 查看
问题:
用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的
至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇 High
DPI Canvas,这里不作深入介绍。
下面是相关的代码:
[html] view
plain copy
<!-- 通过 img 标签引入图片,以便绘制到 canvas 中 -->
<img src="html5rocks.png" alt="" width="300" height="90">
[html] view
plain copy
<!-- canvas -->
<canvas width="300" height="90"></canvas>
<script>
function init() {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.querySelector('img'), 0, 0, 300, 90);
}
window.onload = init;
</script>
解决问题:
首先,引入 hidpi-canvas
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制canvas中的图形(包括文字)都会出现模糊的问题。上面这个就是为了解决这个问题,但是他没有处理图片。
接下来,修改绘制图片的代码
将 init 含税修改成下面的代码
[html] view
plain copy
function init() {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
// polyfill 提供了这个方法用来获取设备的 pixel ratio
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(ctx);
// 注意,这里的 width 和 height 变成了 width * ratio 和 height * ratio
ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
}
这个解决方案本质上是:
不管当前的
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
这样整个 canvas 的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐系来显示,不清晰的问题就得以改善了
用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的
至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇 High
DPI Canvas,这里不作深入介绍。
下面是相关的代码:
[html] view
plain copy
<!-- 通过 img 标签引入图片,以便绘制到 canvas 中 -->
<img src="html5rocks.png" alt="" width="300" height="90">
[html] view
plain copy
<!-- canvas -->
<canvas width="300" height="90"></canvas>
<script>
function init() {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.querySelector('img'), 0, 0, 300, 90);
}
window.onload = init;
</script>
解决问题:
首先,引入 hidpi-canvas
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制canvas中的图形(包括文字)都会出现模糊的问题。上面这个就是为了解决这个问题,但是他没有处理图片。
接下来,修改绘制图片的代码
将 init 含税修改成下面的代码
[html] view
plain copy
function init() {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
// polyfill 提供了这个方法用来获取设备的 pixel ratio
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(ctx);
// 注意,这里的 width 和 height 变成了 width * ratio 和 height * ratio
ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
}
这个解决方案本质上是:
不管当前的
devicePixelRatio的值是多少,统一将
canvasDOM节点的width属性设置为其
csswidth属性的两倍,同理将height属性也设置为
cssheight属性的两倍,即:
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
这样整个 canvas 的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐系来显示,不清晰的问题就得以改善了
相关文章推荐
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 【工具】PPT插入高清图片保存后图片变模糊的解决方法
- canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题
- 解决html5 canvas 绘制字体、图片与图形模糊问题
- 解决Html5用canvas绘制不出来图片的问题
- SD高清图片处理--内存疯长解决方法
- openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题
- 解决WPF图片模糊最佳方法
- android只绘制一部分图片的解决方法
- 解决ECShop首页缩略图和产品页图片模糊方法
- cocos 导入图片 变模糊的解决方法
- 32.CGBitmapContextCreate 在配备Retina的设备上绘制模糊的 解决方法 iOS截屏模糊
- Android调用系统拍照裁剪图片模糊的解决方法
- 解决用canvas插入背景图片模糊的办法
- android Canvas绘制图片模糊
- 解决在Word中插入图片不按原始大小显示(变大模糊)的方法
- Android 使用Canvas在图片上绘制文字的方法
- Canvas-drawImage 绘制图片模糊问题
- cad输出高清pdf字体模糊解决方法
- UEditor上传图片被压缩得模糊的解决方法