html2canvas以及domtoimage的使用踩坑总结
前言
首先做个自我介绍，我是成都某企业的一名刚刚入行约一年的前端，在之前的开发过程中，遇到了问题，也解决了问题，
但是在下一次解决相同问题的时候，只对这个问题有一丝丝的印象，还需要从新去查找，于是，我注册了segmemtfault，
便于搜集我的问题总结，以及将踩坑经验分享给每一个开发人员，好了，闲话不多说。需求
需求：要求能够实现根据后端返回的数据生成一张image，便于用户将图片分享到朋友或者朋友圈，取得用户的关注。开始踩坑
一.html2canvas对于跨域图片，转换的时候会将跨域图片识别为空白。
问题分析：
既然是由于跨域引起的问题，那我们让资源不跨域不就可以访问了吗？
解决办法：
将图片放置服务器，通过nginx进行代理资源，前端访问图片便不涉及到跨域问题。
二.html2canvas动态加载内容，通过canvas转换出来的数据，图片为空
问题分析：
内容是动态加载进来的，转换肯定是在请求完毕之后再去转换，但是在请求完毕之后去转换，按理说所需要的所有数据都已经到达前端，应该可以转换，经过思考，发现图片内容从后台读取需要一定时间去解析，才能够完整的将图片资源展示出来，html2canvas是将页面上显示的dom元素，经过解析将dom画在canvas上在转换为image图片格式。
解决办法：
1.让html2canvas转换代码等待一定时间，在进行转换操作，可进行转换。代码如下图所示
2.当全部的图片数据都加载完毕之后，在执行转换操作。（本人建议第二种，更保险）
三.html2canvas转换的base64位图不能被ios8以上版本所识别。会呈现出整个截图页面空白
问题分析：
这个问题的起因，应该是html2canvas对高版本的ios不支持（自我感觉），这个问题我很是头疼，当时根本没有对ios进行测试。客户使用的时候发现了这个问题，没法。想办法解决。百度说是由于ios不能识别base64的前缀，于是我试过将图片的前缀去除，但发现没反应。还是无用。思来想去感觉html2canvas坑太多了。填都填不完。于是。
解决办法：
我采用了另一款插件，dom-to-image,弄上去没有问题了。
四.dom-to-image运用上去，在ios上能够出现内容了，但发现存在一个问题，部分图片内容，第一次进行公众号网页加载，没有正确显示，要在次进入才会显示，此bug同样是ios8以上版本
问题分析：
这一个问题我没有找到问题所在，一脸懵，不过最终还是得到了解决。
解决办法：
运用dom-to-imagede toSvg方式完美解决问题。
五.离成功只有一步之遥了，使用了svg之后安卓手机不能将图片分享给朋友。识别不了
问题分析：
安卓能识别jpeg但不能识别svg矢量图片
解决办法：
自己手写咯。判断手机为安卓还是ios。
六.所有的问题都已解决，我兴奋的跑去借了个果5，拿来测试，发现网页的背景图片不见了。
问题分析：
我长按两秒左右又是正常显示了，故图片是已经完美转换成功，可能是因为图片在转换过程中，没有完美适配到4.0寸的屏幕，
解决办法：
模拟长按事件，解决bug，这个方式可能不太好，但也是一种解决方式。
总结
躺过的坑都是我的经验，分享的同时我又加固了一遍。解决实际问题的思路，在过了一遍，对我帮助很棒。
代码参考
//判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法
$(".code").click(function() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var isAndroid = u.indexOf('Android') > - || u.indexOf('Adr') > -; //android终端
if(isiOS) {
window.location.href = "mycodeios.html"
} else if(isAndroid) {
window.location.href = "mycode.html"
}
})
安卓html2canvas方法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>分享</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
/*头部*/ body {
background: #FFFFFF;
height: !important;
} .container {
max-width: 750px;
min-width: 32px;
margin: auto;
background: #FFFFFF;
} .zhe {
position: fixed;
max-width: 750px;
min-width: 32px;
width: %;
height: %;
background: #45A196;
z-index: ;
} .imge {
position: absolute;
max-width: 750px;
min-width: 32px;
width: %;
height: %;
margin: % %;
z-index: ;
/*background: url(codeimg/code.jpg) no-repeat;*/
/*background-size: contain;*/
} .left {
position: absolute;
left: %;
top: %;
color: #FFFFFF;
font-size: 26px;
letter-spacing: 5px;
} .bottom {
position: absolute;
right: %;
top: %;
} .codebotom {
position: absolute;
padding: 10px;
background: #FFFFFF;
width: 90px;
height: 90px;
} .butright_img {
position: absolute;
width: 80px;
height: 80px;
margin: 5px;
top: 0px;
left: 0px;
} .textbottom {
position: absolute;
width: 40px;
letter-spacing: 5px;
color: #FFFFFF;
top: 20px;
left: -45px;
} .butright {
position: absolute;
bottom: 50px;
right: %;
color: #4BA59B;
padding: 10px %;
border-radius: 3px;
z-index: ;
color: #ffffff;
text-align: center;
} .image {
display: block;
max-width: 750px;
min-width: 32px;
width: %;
position: absolute;
top: 0px;
left: 0px;
background: #FFFFFF;
z-index: ;
}
</style>
</head> <body>
<div class="container">
<!--二维码-->
<div class="zhe"></div>
<div class="imge">
<div style="position: absolute; top: 0px; left: 0px;">
<img src="codeimg/code.jpg" />
</div>
<div style="width: 100%;height: 100%; position: relative;">
<div class="left state"></div>
<div class="bottom">
<div class="textbottom">扫码立即注册</div>
<div class="codebotom">
<div id="qrcode" class="butright_img"></div>
</div>
</div>
</div>
<div>
<div class="butright">长按保存图片</div>
</div>
</div>
<div class="image" style="display: block;"> </div> </div>
</body>
<script src="js/config.js"></script>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fenxiang.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--二维码-->
<script src="js/jquery.qrcode.logo.min.js" type="text/javascript" charset="utf-8"></script>
<!--html2canvas图片-->
<script type="application/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
// 倒计时
$(function() {
var openid_list = eval(decodeURIComponent(localStorage.getItem("openid")))
var openid = openid_list[]
var access_token = openid_list[] window.history.pushState(null, null, "#");
window.addEventListener('popstate', function(e) {
window.location.href = 'my.html'
}, false); //创建二维码
function createQRCode(id, url, width, height, src) {
$('#' + id).empty();
jQuery('#' + id).qrcode({
render: 'canvas',
text: url,
width: width, //二维码的宽度
height: height, //二维码的高度
imgWidth: width / , //图片宽
imgHeight: height / , //图片高
src: src //图片中央的二维码
});
}
var url = 'https://api.gzkny.com/h5/aa.html?openid=' + openid;
createQRCode("qrcode", url, , , "image/follow.jpg"); // 使用html2canvas 转换html为canvas 安卓html2canvas方法
function downloadForJS() {
html2canvas(document.body, {
useCORS: true,
logging: true
}).then(function(canvas) {
var imgUri = canvas.toDataURL().replace("image/png", "image/octet-stream"); // 获取生成的图片的url
// $('.zhe').hide()
// $('.imge').hide()
$('.image').html('<img src="' + imgUri + '"/>')
});
} // 获取数据
$.ajax({
method: 'GET',
url: window.BASE_URL + 'api/v1/member/get',
contentType: 'application/x-www-form-urlencoded',
async: true,
dataType: "json",
data: {
access_token: access_token,
},
success: function(data) {
console.log(data)
if(data.error == 'success') {
$('.state').html(data.data.username)
downloadForJS()
}
}
}); })
</script> </html>
ios系统dom-to-image方法（css样式一定要自己写 避免图片失效）
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>分享</title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/dom-to-image.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<style type="text/css">
/*头部*/
* {
margin: 0px;
padding: 0px;
} body {
background: #45A196;
width: %;
height: %;
} .container {
max-width: 750px;
min-width: 32px;
margin: auto;
position: relative;
} .imge {
position: relative;
max-width: 750px;
min-width: 32px;
width: %;
height: %;
z-index: ;
} .left {
position: absolute;
left: %;
margin-top: %;
color: #FFFFFF;
font-size: 26px;
letter-spacing: 5px;
} .bottom {
position: absolute;
} .codebotom {
position: absolute;
background: #FFFFFF;
width: 90px;
height: 90px;
} .butright_img {
position: absolute;
width: 80px;
height: 80px;
margin: 5px;
top: 0px;
left: 0px;
} .textbottom {
position: absolute;
width: 50px;
letter-spacing: 5px;
color: #FFFFFF;
top: 15px;
left: -45px;
} .butright {
position: fixed;
bottom: 0px;
right: %;
z-index: ;
color: #ffffff;
} .image {
display: block;
max-width: 750px;
min-width: 32px;
width: %;
position: absolute;
top: 0px;
left: 0px;
background: #FFFFFF;
z-index: ;
}
</style>
</head> <body>
<div id="container">
<div class="container">
<div class="imge">
<img style="width: 100% ; position: absolute;" src="codeimg/code.jpg" />
<div class="left state"></div>
<div style=" position: absolute;right: 38%; margin-top: 110%;">
<div class="bottom">
<div class="textbottom">扫码立即注册</div>
<div class="codebotom">
<div id="qrcode" class="butright_img"></div>
</div>
</div>
</div>
</div>
</div>
<div class="butright">长按保存图片</div>
</div>
<div class="bot" style="position: fixed; z-index: 9999999999999999; background: #4BA59B;"></div> </body>
<!--二维码-->
<script src="js/jquery.qrcode.logo.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/config.js"></script>
<script type="text/javascript">
$(function() {
var openid_list = eval(decodeURIComponent(localStorage.getItem("openid")))
var openid = openid_list[]
var access_token = openid_list[] window.history.pushState(null, null, "#");
window.addEventListener('popstate', function(e) {
window.location.href = 'my.html'
}, false); //创建二维码
function createQRCode(id, url, width, height, src) {
$('#' + id).empty();
jQuery('#' + id).qrcode({
render: 'canvas',
text: url,
width: width, //二维码的宽度
height: height, //二维码的高度
imgWidth: width / , //图片宽
imgHeight: height / , //图片高
src: src //图片中央的二维码
});
}
var url = 'https://api.gzkny.com/h5/aa.html?openid=' + openid;
createQRCode("qrcode", url, , , "image/follow.jpg"); // ios系统dom-to-image方法
function downloadForJS() {
domtoimage.toSvg(document.getElementById('container'))
.then(function(dataUrl) {
/* do something */
var img = new Image();
img.src = dataUrl;
$('.container').hide()
// console.log(dataUrl)
// document.body.appendChild(img);
$('.bot').html(img)
});
} // 禁止屏幕滑动
function bodyScroll(event) {
event.preventDefault();
}
document.body.addEventListener('touchmove', bodyScroll, false);
$('body').css({
'position': 'fixed',
"width": "100%"
}); // 获取数据
$.ajax({
method: 'GET',
url: window.BASE_URL + 'api/v1/member/get',
contentType: 'application/x-www-form-urlencoded',
async: true,
dataType: "json",
data: {
access_token: access_token,
},
success: function(data) {
console.log(data)
if(data.error == 'success') {
$('.state').html(data.data.username)
downloadForJS()
}
}
}); })
</script> </html>
html2canvas以及domtoimage的使用踩坑总结的更多相关文章
- html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报
//判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...
- html2canvas+Canvas2Image分享海报功能踩坑
首先需要 import html2canvas from 'html2canvas'; import {Canvas2Image} from '../../assets/js/plug/canvas2 ...
- html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- html2canvas的踩坑之路
html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...
- html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- web前端生成图片之探索踩坑
前段时间,产品和运营整了个非常变态的需求,要求将一个活动页面输出为图片,然后用户进行分享 开始以为是用户自己手动截图分享,没想到后来不是,细思极恐,感叹需求之变态. 从网上找了N个方案,最后确定使用 ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库（Hbase+Mysql）
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- 【踩坑速记】二次依赖？android studio编译运行各种踩坑解决方案，杜绝弯路，总有你想要的~
这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...
随机推荐
- tbls ci 友好的数据库文档化工具
tbls 是用golang 编写的数据库文档化工具,当前支持的数据库有pg.mysql.bigquery 此工具同时提供了变更对比.lint 校验,生成是markdown格式的 简单使用 安装 mac ...
- 用户价值和RFM模型
什么是用户价值? 用户价值就是对公司来说有用的地方,比如有的公司看中用户的消费能力,有的公司则看中用户的忠诚度 .各公司的业务目的不同,用户价值的体现自然也不同.这里主要说一下适用于电商的RFM模型. ...
- 模板 - 部分C++库
__builtin系列 据说是GCC自带的系列,在本地装有 GNU GCC Compiler 的 Codeblocks 和 Codeforces 等平台都可以使用这些.但是没办法从 Codeblock ...
- 网站性能测试工具 webbench 的安装和使用-linux
1.webbench的下载和安装 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz sudo tar xvf we ...
- 用Visual Studio编写UDF的一点小技巧（二）
- var a = function(){}和var a = function(){}();的区别
var a = function(){ ... ... ... } 声明方法. var a = function(){ ... ... ... }(); 声明方法并执行 demo: var u = f ...
- photoshop 的安装破解
最近学习需要用到photoshop,但是photoshop试用期只有30天,于是尝试破解photoshop.参考了网上的很多博客,失败了好几次,终于找到一篇靠谱的博客,很顺利的成功了.在这里记录一下, ...
- windows server2012 R2安装python3.x版本报错0x80240017
windows server2012 R2安装python3.x版本报错0x80240017 环境: windows server 2012 R2系统 问题: 安装python3.5版本时候出现错误0 ...
- 【转】史上最强Tomcat8性能优化
https://blog.csdn.net/ThinkWon/article/details/102744033 文章目录授人以鱼不如授人以渔目的服务器资源Tomcat配置优化Linux环境安装运行T ...
- JS高级：面向对象解析
1 实例属性/方法 都是绑定在使用构造函数创建出来的对象p上; 最终使用的时候也是使用对象p来进行访问; function Person(name, age, doFunc) { this.name ...