function  pxRa(cxt) {

var backingStore = context.backingStorePixelRatio ||

context.webkitBackingStorePixelRatio ||

context.mozBackingStorePixelRatio ||

context.msBackingStorePixelRatio ||

context.oBackingStorePixelRatio ||

context.backingStorePixelRatio || 1;

return (window.devicePixelRatio || 1) / backingStore;

};

此方法是获取设备与canvas一个适合的比例,具体也不知道怎么表达,剧烈来说,设计稿是640,放在iphone 5、6  ,这个值就是2,  电脑满屏就是1,  6plus  3  等等;

根据这个值去对canvas  进行 方法,缩大放小。

这是img的 图,

下面这是   canvas  画出来的图

是不是看上去很清晰,跟原图没有什么区别区别

代码 合图  如下:

var w = $(".container").width();

var h = $(".container").height();

var canvas = document.createElement("canvas");

var context = canvas.getContext("2d");

var ra=getPixelRatio(context);

console.log(ra);

canvas.width = w * ra;

canvas.height = h * ra;

<!-- canvas.style.width = w + "px"; -->

<!-- canvas.style.height = h + "px"; -->

//然后将画布缩放,将图像放大两倍画到画布上

context.scale(2, 2);

html2canvas(obj).then(function(canvas) {

var copyStr = canvas.toDataURL("image/png", 0.92);

$('.complex-img').attr('src', copyStr);

<!-- document.body.appendChild(img); -->

});

canvas,html2canvas等合成图片不清晰问题的更多相关文章

  1. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  2. 通过canvas合成图片

    通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...

  3. vue 合成图片

    目的:将二维码图片和背景图片合成变成一张图片 方法一: 引入依赖 cnpm install qrcanvas --save cnpm install html2canvas --save 具体代码: ...

  4. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  5. MVC中return File(byte[],"image/jpeg")输入图片不清晰

    MVC中需要输入图片的时候有一个便捷的方法,return File(byte[],"image/jpeg"); 但是这样处理的图片很不清晰(特别是要进行缩放,DrawImage,D ...

  6. PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例

    function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...

  7. ImageMagick利用蒙版合成图片

    先看合成后的效果图. 需要的图片素材: 1.一张图片(335x600) 2.一张蒙版图片(335x600) 3.一张相框图片(335x600) 第一步,根据蒙板和图片,截取图片.而且所截取的图片之外的 ...

  8. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  9. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

随机推荐

  1. linux(十二)之用户管理

    前面学习了那么多关于linux的东西,相信大家都对linux应该 有一个大概的了解了.现在给大家分享的是linux中的用户管理,接下来让我们进入正题吧! 今天其实放松了一整天了,有点后悔自己没有把这些 ...

  2. Android binder机制---概述

    1.进程间通讯的原因 目前操作系统都使用虚拟存储技术,管理内存. 假设是32位机器,0-3G是用户空间,3-4G是系统使用.虚拟内存和逻辑内存都按4K分页.这样虚拟内存和逻辑内存就存在对应关系. 一个 ...

  3. Servlet之文件的上传与下载

    文件上传和文件下载是我们学JAVA Web时必不可少的模块.今天我们探讨下这个问题 文件上传: request.setCharacterEncoding("utf-8");//设置 ...

  4. Redis订阅和发布模式和Redis事务

    -------------------Redis订阅和发布模式------------------- 1.概念     Redis 发布订阅(pub/sub)是一种消息通信模式:     发送者(pu ...

  5. 几个常用EL表达式的用法

    转载至  http://yqsshr.blog.51cto.com/469059/131824 1,用来获取表单数据  param 和 paramValues 1.jsp 的有如下表单 <for ...

  6. 探索 Java 热部署

    在 JAVA 开发领域,热部署一直是一个难以解决的问题,目前的 JAVA 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加载才能完成更新操作.对于某些大型的应用来 ...

  7. 从async await 报错Unexpected identifier 谈谈对上下文的理解

    原文首发地址: 先简单介绍下async await: async/await是ES6推出的异步处理方案,目的也很明确:更好的实现异步编程.   详细见阮大神 ES6入门 现在说说实践中遇到的问题:使用 ...

  8. NSMutable属性声明时为什么不能使用copy

    在iOS开发里面我们经常会进行NSMutable(可变类型的类,常用的如NSMutableString,NSMutableArray,NSMutableDictionary,NSMutableData ...

  9. CCNA+NP学习笔记—交换网络篇

    本章关于企业网络的最底层--交换层,难度较低,主要为以后三层的路由做铺垫.所有笔记的分类顺序为:序章→交换层→路由层→运营商,体现了从企业网到互联网的学习顺序. 注:思科设备命令行通常不分大小写!以后 ...

  10. 转:【Java集合源码剖析】LinkedList源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35787253   您好,我正在参加CSDN博文大赛,如果您喜欢我的文章,希望您能帮我投一票 ...