js使用canvas绘制高清图片

最新推荐文章于 2025-05-13 16:20:13 发布

希德

最新推荐文章于 2025-05-13 16:20:13 发布

阅读量7.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： canvas javascript

本文链接：https://blog.youkuaiyun.com/hejunpochen/article/details/52093313

javaScript 专栏收录该内容

5 篇文章

订阅专栏

H5能使用canvas绘制图像，但是有些时候我们需要绘制高清的图片。

先介绍下几个定义：

什么是devicePixelRatio：

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels
(dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
如果devicePixelRatio > 1说明是高清屏幕了，现在的手机设备很多都是高清屏幕，我的手机devicePixelRatio 是2。

js代码

(function() {
    var img = null; //在需要绘制的图片放在方法外定义，如果一个画板多次绘制时，不会出现闪屏的问题。
    var w = 0, h = 0 ; //图片显示的宽高
    var ratio = 1 ; //devicePixelRatio值
    var ratio_w = 0, ratio_h = 0; //绘制高清图片宽高

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");

    $("#drawImg").each(function() {

        //只有当屏幕宽度变化和img对象为空时候才进行一次初始化参数
        if(img == null || w != window.innerWidth) {
            ratio = getPixelRatio(ctx); //获取设备的devicePixelRatio
            w = window.innerWidth;  //获取设备的显示屏幕宽高
            h = this.height * (window.innerWidth / this.width); //图片加载完this.height才大于0.

            ratio_w = canvas.width = w * ratio;  //计算屏幕的高清图片的宽高，同时设置画板的像素  
            ratio_h = canvas.height = h * ratio;

            img = new Image(ratio_w, ratio_h);   //多次创建imgae绘制会闪屏

            //这个是重点，我们需要把canvas画板通过css样式控制显示高度
            $("#canvas").css({
                width: (w + 'px'),
                height: (h + 'px')
            });
        }

        img.src = "images/foo.png";
        //只有在load完成才会进行绘制。所以绘制需要写在onload事件中
        img.onload = function() {
            ctx.clearRect(0, 0, ratio_w, ratio_h); //清除画板，不清除图像会覆盖。
            ctx.drawImage(img, 0, 0, ratio_w, ratio_h); //绘制高清图片
        }
    });


    //获取设备的devicePixelRatio
    function getPixelRatio(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return(window.devicePixelRatio || 1) / backingStore;
    };
})()

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <img id="drawImg" src="images/foo.png" style="display: none;"/>
        <canvas id="canvas"></canvas>
        <script type="text/javascript" src="js/star.js" ></script>
    </body>
</html>