html5 canvas绘制图片模糊的问题
来源:互联网 发布:手机视频后期制作软件 编辑:程序博客网 时间:2024/05/01 08:58
前提条件
假设我们要在 canvas 中绘制一张 300 x 90
的图片,并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180
的图片,处理过高清屏的同学应该会有这方面的经验。
问题重现
OK,我们先把问题重现一下,以便有一个更直观的了解。下面是相关的代码(为了简单起见,我把代码都写在了 HTML 文档里面):
<!-- 通过 img 标签引入图片,以便绘制到 canvas 中 --><img src="html5rocks.png" alt="" width="300" height="90"><!-- 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>
代码很简单,没有做任何处理,具体的效果和完整的代码可以查看这个 DEMO,这个 demo 在高清屏的手机中会出现的问题:canvas 中的图片变模糊了!。
至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇 High DPI Canvas,这里不作深入介绍。
解决问题
首先,引入 hidpi-canvas-polyfill
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备中,任何绘制在 canvas 中的图形(包括文字)都会出现模糊的问题。上面这个 polyfill 就是为了解决这个问题,但是它没有处理图片。
接下来,修改绘制图片的代码
将 init
函数修改成下面这样:
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);}
可以点击这里查看完整的代码和效果,在高清屏的设备中打开,看看 cavans 中的图片是否完美显示。
说明
这个解决方案本质上和 @白一梓 的答案是一样的:先放大 canvas,再用 CSS 将其限制回原始大小。
如果你看了 polyfill 的代码就会明白其中的原理了,这个 polyfill 的代码十分简短明了,它做了两件事:一是将 canvas 的高和宽分别乘以 ratio 将其放大,然后又用 CSS 将高和宽限制成初始的大小;二是 hack canvas 中常用的函数,如:fillRect
, clearRect
, lineTo
, arc
等,将它们的参数都乘以 ratio,以方便我们可以像以前那样使用这些方法,而不用在传参的时候手动乘以 ratio。
方案二:
不管当前的devicePixelRatio
的值是多少,统一将canvas
DOM节点的width属性设置为其css
width属性的两倍,同理将height属性也设置为css
height属性的两倍,即:
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
这样整个canvas的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐标系来显示,不清晰的问题就得以改善了
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- Canvas-drawImage 绘制图片模糊问题
- Canvas绘制图片模糊
- 解决Html5用canvas绘制不出来图片的问题
- 解决Html5用canvas绘制不出来图片的问题
- canvas绘制出现模糊的问题
- android Canvas绘制图片模糊
- html5 canvas drawImage图片模糊
- HTML5使用canvas画图时,图片被自动放大模糊的问题.....
- 使用html5 canvas绘制图片
- HTML5之canvas绘制图片
- HTML5 Canvas图片马赛克模糊动画
- HTML5 移动开发 ------ Canvas 9.3 绘制图片
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Html5 用canvas绘制图片,绘制不出来
- 修改图片模糊问题canvas.drawImage
- 1046. Shortest Distance (20)
- 悬镜安全丨HTTP/2性能更好,但是安全性又如何呢?
- 强制开启android webview debug模式使用Chrome inspect
- 悬镜丨5大安全研究者必用的搜索引擎
- android 手机屏幕密度等级和屏幕逻辑尺寸
- html5 canvas绘制图片模糊的问题
- U3D shaderlab 相关指令开关
- Gsoap的简单使用
- 管道通信:有名管道(FIFO) 和 无名管道(pipe)
- validate技术前后台交互验证(mvc)
- 网页收藏
- 【HDU4352/ZCMU1781】XHXJ's LIS(数位DP)
- axis调用webservice报错,org.apache.axis.ConfigurationException: No service named *** is available
- Spring AOP中pointcut expression表达式解析 及匹配多个条件