canvas图片合成模糊变清晰的方法

昨天刚刚发现之前合成的图片不是很清晰，就上网上找了一下关于canvas图片清晰度的问题，然后刚刚解决就附上部分的对比代码，希望可以帮助和我一样遇到这个问题的朋友

<div class="content" style="background: #090909;text-align: center;">
        <!--二维码图片-->
        <canvas id="canvas" style="width:320px;height:530px;display:none;"></canvas>
        <img src="img/inviteUp.jpg" width="320" height="530" id="bg">
        <img src="img/inviteDown.jpg" width="320" height="530" id="bg2">
        <div id="imgCode" style="display:none;"></div>
  </div>

这块是显示宽为320，高为530的img合成图，将canvas合成后的url动态赋给$(“#bg")的url里面了，加粗为注意的地方

引入hidpi-canvas.min.js，github一下就能够下载到，就该js代码，把一些宽，高，字体的大小，通通*2就OK啦

改变前：

/*背景图+二维码*/
            $("#bg").css("display","block");
            var bg=document.getElementById("bg");
            var code=document.getElementById("imgCode").getElementsByTagName("img")[0];
            var canvas="";
    
            canvas=document.getElementById("canvas");
            canvas.width = 320;
            canvas.height = 530;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(bg, 0, 0, 320, 530);
            ctx.drawImage(code, 235, 455, 70, 70);
    
            ctx.font = 'bolder 46px Microsoft YaHei';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillStyle = '#FE801B';
            ctx.fillText(straddle, 160, 310);

改变后：

/*背景图+二维码*/
            $("#bg").css("display","block");
            var bg=document.getElementById("bg");
            var code=document.getElementById("imgCode").getElementsByTagName("img")[0];
            var canvas="";
    
            canvas=document.getElementById("canvas");
            canvas.width = 640;
            canvas.height = 1060;

            var ctx=canvas.getContext("2d");
    
            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);
            ctx.drawImage(bg, 0, 0, 640*ratio, 1060*ratio);
            ctx.drawImage(code, 470, 910, 140*ratio, 140*ratio);
   
            ctx.font = 'bolder 92px Microsoft YaHei';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillStyle = '#FE801B';
            ctx.fillText(straddle, 320*ratio, 620*ratio);

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

兼容移动端的下载图片代码：这个是支持safire浏览器的代码

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                canvas.toBlob(function(blob) {
                    var url = URL.createObjectURL(blob);
                    bg.setAttribute("src",url);
                });
            } else {
                var image= new Image();
                ctx.drawImage(image,0,0,320,530);
                image.src = canvas.toDataURL("image/png");
                image.setAttribute("crossOrigin", 'Anonymous');
                bg.setAttribute("src",canvas.toDataURL("image/png"));
            }