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. mongodb菜鸟整理 2 C#Driver使用

    一下载 从官网上下载... 二 引用 下载完了将其解压到某个文件夹内,打开vs建立一个工程 右键引用,找到刚才解压的目录,把里面说有的dll文件全部添加就好 三 命名空间 我都是先打然后alt+shi ...

  2. mysql转ElasticSearch的案例分析

    前言 最近工作中在进行一些技术优化,为了减少对数据库的压力,对于只读操作,在程序与db之间加了一层-ElasticSearch.具体实现是db与es通过bin-log进行同步,保证数据一致性,代码调用 ...

  3. Maven生成可以直接运行的jar包的多种方式

    Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...

  4. 栈的实现Java

    package practice; import java.util.Iterator; //栈 public class MyStack<T> implements Iterable&l ...

  5. java代码块的理解

    最近在复习java基础,在看到java代码块的时候,忽然发现自己貌似对于java代码块一无所知,于是赶紧对着一些资料实战演练了一把. 对于java代码块,不难根据名称看出其实就是一些java语句的集合 ...

  6. Varnsih调用多台后端主机

    author:JevonWei 版权声明:原创作品 Varnsih调用多个后端主机 环境 Varnish 192.168.198.139 图片服务端 192.168.198.120 程序服务端 192 ...

  7. 大型网站的 HTTPS 实践(四)——协议层以外的实践

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt390 1 前言 网上介绍 https 的文章并不多,更鲜有分享在大型互联网站 ...

  8. Redis 常用数据结构及其控制命令整合

    Redis 键值支持5种基本结构,分别是字符串,列表,哈希,集合,有序集合.每一种数据结构都有对应的取值和设值命令,辅助命令,除此之外,还有一些全局命令,用来管理Redis存储的所有 键. 全局命令 ...

  9. STEP 7-MicroWIN SMART 西门子PLC再次安装问题

    我的电脑第一次安装s7(STEP 7-MicroWIN SMART 西门子PLC)是没有问题的,有一次不小心删除,再次安装却怎么也安装不上.猫那个咪的!Why! 网上各种查资料,完全不能解决问题,有的 ...

  10. java 多线程(0) Java线程

    线程 线程是系统调度的基本单元,每当创建一个进程时,会有许多的线程,也叫轻量级进程,在一个进程中拥有多个线程,各自都有自己的计数器,堆和局部变量属性,并且能够分享内存变量. 为什么要使用多线程  1. ...