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

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

这块是显示宽为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);

改变后：

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"));
           }

canvas图片合成模糊变清晰的方法相关推荐

html实现图片淡化效果,图片由模糊变清晰的淡入效果 js+css实现【原创】
网页里,在一些例如栏目.标签.产品展示的地方,如果直接显示图片,会觉得有点平淡,如果图片加点由模糊变清晰.淡入淡出的效果,会大大的增强用户体验.本文将为你介绍一个js+css实现的方法,代码简单易懂, ...
如何给图片降噪？图片噪点模糊变清晰的方法分享
我们日常出去旅游或者游玩,是肯定离不开拍照的,但是每个人的拍照技术都是不一样的,加上环境.设备等等因素,回家后看到照片也是满满的噪点不太清晰,拍摄的照片由于有这些噪点的存在,画质看起来就会比较模糊,那 ...
模糊照片如何修复？分享两种图片变清晰的方法
在我们日常生活中,难免会遇到一些照片因为拍摄环境不好或是保存方式不当而变得模糊不清.这时候,我们就需要一些技巧来修复这些模糊照片,让它们变得更加清晰明亮.下面,我将分享两种图片变清晰的方法. 方法一: ...
Python图片模糊过滤器：让模糊变清晰！
Python图片模糊过滤器:让模糊变清晰! 在图像处理中,模糊图片是一种常见的问题.当我们需要从模糊的图片中提取信息时,模糊会严重影响精度.但是,你不必亲自动手去修复模糊的图片.使用Python的Pi ...
html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决
html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决注意作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题; 背景图必须放在img里面里面,通过定位处理成和背 ...
不清晰的图片怎么一键变清晰？分享几个简单好用的AI图片变清晰工具
我们在日常生活经常会遇到这样情况:想要从网上下载一张好看的图片当做电脑壁纸,但是因为图像太小,设置成壁纸后图片会因为被放大而变得非常模糊,那是因为放大图片会导致图片像素变得更大,而图像的分辨率并没有增 ...
Android 系统（161）---N/O版本上图库打开一张图片，图片从模糊到清晰的时间太长
N/O版本上图库打开一张图片,图片从模糊到清晰的时间太长与M版本比较,N版本上进图库打开一张图片,图片从模糊到清晰的时间太长 N上Google默认没有多线程encode而只有单线程encode,导致 ...
canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
oss图片合成模糊问题
oss图片合成模糊问题,去掉resize和相关参数就可以实现原图上加水印. 原因:resize是图片缩放的意思 ,弄了半天就是因为resize给我缩放了,导致图片模糊. eg: 调整前的: http: ...
canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...

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

canvas图片合成模糊变清晰的方法相关推荐

最新文章

热门文章