这是项目中遇到的一个问题,起初觉得把一个html元素生成图片,提供给用户下载的需求挺容易实现的,毕竟看过一些截图的插件,但是在真正操作中遇到了各种各样的问题,比如移动端上截图显示不清晰,html元素中含有跨域的img图片导致污染canvas等等等。。到现在我还没有真正解决这里的一些问题,先暂时记录一下使用的情况吧;

需求:

如下图,将一个包含有文字、图片的元素生成一张图片;

工具:

html2canvas + canvas2Image

使用问题:

起初觉得使用html2canvas还是挺简单的,只需要html2canvas(DOM)就能解决,但是遇到的问题并没那么简单;

1、首先需求是在移动的中使用,这就遇到了Retina的问题;

现在的手机屏幕大多数都是分辨率为2,也就是原来的两个像素到了手机上成一个像素显示,这也导致了canvas截得的图在移动端上显示变得很模糊;

正常的处理方式当然是将图片放大分辨率的倍数,然后再放入原大小的元素中;

网上看了很多对于该问题的方法,但是没有一个完全解决的,但有 大神github Demo,很大的解决了我的问题;

修改了两处代码(具体修改请见大神github Demo),主要是用于放大和设置对应大小的canvas,已经可以很完美的解决图片模糊的问题了

但是!!!!! 我的移动端页面是试用rem进行布局,rem值不定导致canvas绘图区域的宽高计算错误,无法完整包含整个元素;

最后的解决办法: 在调用html2canvas的时候,canvas.width 和 canvas.height 设置为一个远大于元素宽度的值,使其canvas的绘图区域等于canvas的大小,不会出现截图不完整的情况

         var main = {
var main = {
init:function(){
main.setListener();
},
//设置监听事件
setListener:function(){
main.html2Canvas();
},
//获取像素密度
getPixelRatio:function(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素,生成截图canvas
html2Canvas: function () {
var shareContent = $("#view")[0];// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生)dom 宽度
var height = shareContent.offsetHeight; // 获取(原生)dom 高
var offsetTop = shareContent.offsetTop + 999; //元素距离顶部的偏移量 var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy + 999; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
context.scale(scaleBy, scaleBy); var opts = {
// allowTaint:true,
// 允许加载跨域的图片
useCORS:true,
tainttest:true, //检测每张图片都已经加载完成
scale:scaleBy, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日志开关,发布的时候记得改成false
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
var body = document.getElementsByTagName("body");
// body[0].appendChild(canvas);
// body[0].appendChild(img);
$('#view').html(img);
img.setAttribute('width', width);
img.setAttribute('height', height);
});
setTimeout(function() {
$('.loadingbox').fadeOut(1500);
});
}
}; //最后运行代码
// setTimeout(function() {
main.init();
// }, 1000);

2、html元素中包含外部域名的图片,导致canvas无法截图:

解决方式:

①、使用官方提供的proxy代理,需要后端;官方解决图片跨域方式

②、修改html2canvas源码,对跨域图片做特殊处理

function ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
var self = this;
var loation = location.hostname; //获取主域名
var syc = this.src.indexOf(loation) < 0 && this.src.indexOf('data:image/png;base64') < 0; //用于区分是否是跨域的图片
this.tainted = null;
this.promise = new Promise(function(resolve, reject) {
self.image.onload = resolve;
self.image.onerror = reject;
if (cors) {
if (syc) {
self.image.crossOrigin = ""; //跨域图片处理1.去掉此处的anonymous代码改为空
} else {
self.image.crossOrigin = "anonymous";
};
}
syc? self.image.src = src+"?"+new Date().getTime() : self.image.src = src; //跨域图片处理2.在源src后面添加一个随机数如时间戳
if (self.image.complete === true) {
resolve(self.image);
}
});
}
然后修改html2canvas参数 useCORS:true;//这个地方只需要将useCORS设置成true,千万不要加allowTaint:true这两个不要同时加,我当时在看官网文档的时候,看到这两个参数都是解决跨域的,后来就两个都加上去了,发现两个加上去就会有问题

至此,才算刚刚能达到需求的要求,但是对于rem不定的布局中,如何真正准确计算canvas的绘图区域大小还是没有真正的搞懂,只是暂时能够使用,先记录下来,最后放上整合好的html2canvas.js

2017.07.06:

关于在截取的元素中插入图片跨域的问题,由于公司将图片保存在其他云平台(如七牛类型的),并设置了域名访问限制,导致了上面问题2方法无效,即使是以上代码是允许访问的域名中执行也不行。。。。所以只能转换思路,将图片转换成base64,但是蛋疼的是前端将线上图片转换成base64最常见的方法就是canvas 和 XMLHttpRequest,却也都无法请求下来, 都是报Access-Control-Allow-Origin不允许的错误;所以。。。。只能让后端来完成转成base64了,极度的蛋疼。。。

2017.08.21:

运营反馈在iphone的微信中,生成的图片会消失,变成一片白色;经过测试,生成canvas没有问题,canvas生成img也没有问题,问题就出在了img插入文本中的时候,原来使用的是$('#view').html(img); #view中包含了原来要生成canvas的dom,可能是直接覆盖出的为题,最后用两个div分别包裹dom ;和生成的img,img生成后,隐藏dom,暂时测试没有问题,不知道上线后会不会有妖蛾子

将HTML元素转换成图片供用户下载(html2canvas + canvas2Image)的更多相关文章

  1. 使用的是html5的canvas将文字转换成图片

    当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...

  2. C#技术分享【PDF转换成图片——13种方案】(2013-07-25重新整理)

    原文:C#技术分享[PDF转换成图片--13种方案](2013-07-25重新整理) 重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 写在最前面:为了节约大家时间,撸主把最常 ...

  3. 使用float和display:block将内联元素转换成块元素的不同点

    使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...

  4. PHP生成PDF并转换成图片爬过的坑

    需求描述:根据订单通过模板合同生成新的PDF合同通过e签宝签约后转为图片给用户下载. 需求整理: 1.如何生成PDF文件:使用TCPDF扩展生成.思考: ⑴为了方便将模板中的固定占位符替换为订单中的内 ...

  5. C#技术分享【PDF转换成图片——11种方案】

    1.[iTextSharp.dll],C# 开源PDF处理工具,可以任意操作PDF,并可以提取PDF中的文字和图片,但不能直接将PDF转换成图片. DLL和源码 下载地址:http://downloa ...

  6. 批量将网页转换成图片或PDF文档技巧分享

    工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,尽管多数浏览器具有滚动截屏或者打印输出PDF文档功能.可是假设有几十上百张网页须要处理,那也是要人命的.所以我一直想找一款可以批量处理该工 ...

  7. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  8. Gson字符串编码,字符串转换成图片保存,二进制转换成图片保存

    import java.io.BufferedInputStream; import java.io.ByteArrayInputStream; import java.io.File; import ...

  9. map(callback)将一组元素转换成其他数组(不论是否是元素数组)

    map(callback) 概述 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建 ...

随机推荐

  1. 在64位linux下编译32位程序

    在64位linux下编译32位程序 http://blog.csdn.net/xsckernel/article/details/38045783

  2. tcp窗口机制(写的最简单精炼的文章)

    tcp窗口机制(写的最简单精炼的文章) http://blog.csdn.net/occupy8/article/details/48468445

  3. UIResponder简介

    1.简介 在使用设备的时候我们大多时候是但手指触摸控件了进行的,比如点击密码按钮解锁,上下浏览网页等动作.你肯定也摇动过iphone抢红包和***等等,我们的系统可以处理这些事件则都需要去使用UIRe ...

  4. datatables的学习总结

    $(document).ready(function() { var oTable= $('#dataTables-example').DataTable({ // searching : false ...

  5. 使用GitLab进行落地项目的管理,并且自动更新、重启、回滚

      Gitlab 清空项目历史commit,节省空间 http://blog.csdn.net/dounine/article/details/77840416?locationNum=6&f ...

  6. Qt笔记——多线程

    这个例子是,点击开始按钮,数字累加,点击停止按钮,数字不动. 1,新建一个类,里面是子线程的内容 #ifndef MYTHREAD_H #define MYTHREAD_H #include < ...

  7. 关于在C#中对函数重载理解

    函数重载是个什么概念,才接触的这个概念的时候我也是完全昏了,还在自己看看了书后就理解了.那什么是函数重载呢?我个人理解的是在同一个作用域下有多个同名的函数,但是他们的形参的类型是不同的,或者参数个数是 ...

  8. centos7.5安装opendesktop

    1.下载地址 http://gnome-look.org/ 2.安装 chmod +x opendesktop-app-3.1.3-1-x86_64.AppImage ./opendesktop-ap ...

  9. Oracle 数据库分页查询的三种方法

    一.Oracle 数据库分页查询的三种方法 1.简介 不能对 rownum 使用 >(大于或等于 1 的数值).>=(大于 1 的数值).=(不等于 1 的数值),否则无结果.所以直接用 ...

  10. 【cocos2d-js教程】cocos2d-js 遮挡层(禁止触摸事件传递层)

    在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制,本文主要针对cocos ...