canvas,html2canvas等合成图片不清晰问题
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等合成图片不清晰问题的更多相关文章
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- 通过canvas合成图片
通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...
- vue 合成图片
目的:将二维码图片和背景图片合成变成一张图片 方法一: 引入依赖 cnpm install qrcanvas --save cnpm install html2canvas --save 具体代码: ...
- canvas代替img渲染图片
移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...
- MVC中return File(byte[],"image/jpeg")输入图片不清晰
MVC中需要输入图片的时候有一个便捷的方法,return File(byte[],"image/jpeg"); 但是这样处理的图片很不清晰(特别是要进行缩放,DrawImage,D ...
- PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例
function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...
- ImageMagick利用蒙版合成图片
先看合成后的效果图. 需要的图片素材: 1.一张图片(335x600) 2.一张蒙版图片(335x600) 3.一张相框图片(335x600) 第一步,根据蒙板和图片,截取图片.而且所截取的图片之外的 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- PHP生成小程序二维码合成图片生成文字
这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...
随机推荐
- 早期MyBatis开发与接口式Mybatis开发的简介
早期MyBatis开发与接口式Mybatis开发的简介 一.早期版本的myBatis使用 导jar包 1.配置mybatis.xml的配置文件 1) ...
- MemCache在Windows环境下的搭建及启动
MemCache在Windows环境下的搭建及启动 一.memcache服务器端的安装 1.下载memcached的安装包,memcached_en32or64.zip,下载链接:http://pan ...
- macaca测试web小例子
上午刚把macaca的环境在公司的电脑上吧web 端的环境给搭建好,于是乎,看看网上的例子,看看官方的文档 https://macacajs.github.io/wd.py/ 可以在这个链接看到原滋原 ...
- XMind与MindManager哪个好(网易云课堂老师:Array老师讲解稿)
XMind与MindManager哪个好 作者:网易云课堂老师:Array老师讲解稿 思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...
- ssh的相关实验
author:JevonWei 版权声明:原创作品 跨主机ssh连接 主机A想连接主机C,但是主机C防火墙等原因禁止主机A连接,而主机A可以连接主机B,主机B也可连接主机C,即主机A就可通过主机B做跳 ...
- C++中关于重载默认构造函数与默认全部参数的构造函数的使用注意
# include<iostream>using namespace std;class Time{public: //公用成员函数 ...
- Mac上安装openCV(Java版本)
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt410 Install and use OpenCV 3.0 on Mac O ...
- Microsoft Visual Studio 打开代码出现乱码解决方案
在用VS编写代码时,文本的字符集可能和编译器的字符集不同,在这种情况下代码会显示出乱码. 解决办法: 在VS的工具->选项里面找到"文本编辑器",勾选“自动检测不带签名的UT ...
- 【DDD】领域驱动设计实践 —— 业务建模小招数
本文结合团队在ECO(社区服务系统)业务建模过程中的实践经验,总结得到一些DDD业务建模的小招数,不一定是完美的,但是对我们团队来说很有效用,希望能帮到其他人.后面会陆续将项目中业务建模的一些经典例子 ...
- 再起航,我的学习笔记之JavaScript设计模式21(命令模式)
命令模式 概念描述 命令模式(Command): 将请求与实现解耦并封装成独立的对象,从而使不同的请求对客户端的实现参数化 示例代码 命令模式我们可以看成是将创建模块的逻辑封装在一个对象里,这个对象提 ...