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. [2017-08-16]ABP系列——QuickStartB:正确理解Abp解决方案的代码组织方式、分层和命名空间

    本系列目录:Abp介绍和经验分享-目录 介绍ABP的文章,大多会提到ABP框架吸收了很多最佳实践,比如: 1.N层 (复用一下上篇的图) 展现层(Personball.Demo.Web):asp.ne ...

  2. Spring详解(四)------注解配置IOC、DI

    Annotation(注解)是JDK1.5及以后版本引入的.它可以用于创建文档,跟踪代码中的依赖性,甚至执行基本编译时检查.注解是以‘@注解名’在代码中存在的. 前面讲解 IOC 和 DI 都是通过 ...

  3. html+css手记

    ----------------------html定义和基本结构---------------------- HTML是 HyperText Mark-up Language 的首字母简写,意思是超 ...

  4. HTTP手记

    ---------------------tcp/ip模型和osi模型---------------------tcp/ip协议模型   osi模型应用层   应用层 表示层 会话层传输层   传输层 ...

  5. 对The C programming language一书第6.6节代码的理解

    代码如下(基本与书中一致) 1 #include <stdio.h> 2 #include <string.h> 3 #include <ctype.h> 4 #i ...

  6. Microsoft .Net Remoting系列专题之三:Remoting事件处理全接触

    前言:在Remoting中处理事件其实并不复杂,但其中有些技巧需要你去挖掘出来.正是这些技巧,仿佛森严的壁垒,让许多人望而生畏,或者是不知所谓,最后放弃了事件在Remoting的使用.关于这个主题,在 ...

  7. Serializable序列化的作用

    这里转载一篇讲解java序列化(Serializable)和反序列化方面的感觉很好的文章.1.序列化是干什么的?简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的 ...

  8. copy和mutableCopy都是浅拷贝!!!------你被骗了很多年

    所有系统容器类的copy或mutableCopy方法,都是浅拷贝!!! (ps:什么是容器?比如NSArray,NSMutableArray,NSDictionary,NSMutableDiction ...

  9. 【C#多线程编程实战笔记】二、 线程同步

    使用Mutex类-互斥锁 owned为true,互斥锁的初始状态就是被主线程所获取,否则处于未获取状态 name为定义的互斥锁名称,在整个操作系统只有一个命名未CSharpThreadingCookb ...

  10. 团队作业10——复审与事后分析(Beta版本)

    Deadline: 2017-6-13 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目内容为后文的两个方面 Beta阶段项目复审(单独一篇博客) 事后诸葛亮分析报告(单独 ...