Canvas 在高清屏下绘制图片变模糊的解决方法

wind3110991 发布于2019-08-21 10:39 / 3360人阅读

摘要：之前我在上回答过绘制图片模糊的问题，但是可能是由于我给出的答案过于简略，加上答案中的链接已经失效，很多人反映这种办法并不好使。前提条件假设我们要在中绘制一张的图片，并且要保证它在高清屏中不模糊。

之前我在 SF 上回答过「html5 canvas绘制图片模糊的问题」，但是可能是由于我给出的答案过于简略，加上答案中的 demo 链接已经失效，很多人反映这种办法并不好使。但是我在给出答案之前是在小米2 和 iPhone 上测试过的，没有任何问题。下面我会一步一步地描述具体的步骤。

前提条件

假设我们要在 canvas 中绘制一张 300 x 90 的图片，并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180 的图片，处理过高清屏的同学应该会有这方面的经验。

问题重现

OK，我们先把问题重现一下，以便有一个更直观的了解。下面是相关的代码（为了简单起见，我把代码都写在了 HTML 文档里面）：

代码很简单，没有做任何处理，具体的效果和完整的代码可以查看这个 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。

GPU服务器海外云主机的解决方法解决问题的方法 failed的解决方法解决数据分析的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85960.html

移动端H5页面生成图片解决方案

摘要：现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传生成图片可以用但是由于已经有了这个开源库，所以为了节省时间就没有自己写了地址少啰嗦，先看东西根据获取像素比将传入值转为整数绘制获取想要现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！ 1. 生成图片可以用canvas,但...

sewerganger 2019-08-29 16:19 评论0 收藏0
移动端H5页面生成图片解决方案

摘要：现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传生成图片可以用但是由于已经有了这个开源库，所以为了节省时间就没有自己写了地址少啰嗦，先看东西根据获取像素比将传入值转为整数绘制获取想要现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！ 1. 生成图片可以用canvas,但...

Neilyo 2019-08-23 10:47 评论0 收藏0
网页保存为图片及高清截图的优化 | canvas跨域图片配置

摘要：本次技术调研来源于项目中的一个重要功能需求实现微信长按网页保存为截图。以下主要解决两类跨域的图片资源包括已配置过的中的图片资源和微信用户头像图片资源。本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中...

zhaochunqi 2019-08-01 17:43 评论0 收藏0