html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报
//判断手机为安卓还是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[] /*监听返回 iosbug*/
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 / 6, //图片宽
imgHeight: height / 6, //图片高
src: src //图片中央的二维码
});
}
var url = 'https://api.gzkny.com/h5/aa.html?openid=' + openid;
createQRCode("qrcode", url, 80, 80, "image/follow.jpg");*/ /*使用html2canvas 转换html为canvas 安卓html2canvas方法*/
function downloadForJS(src) {
html2canvas(document.body, {
useCORS: true,
logging: true,
allowTaint: false, //允许跨域（图片跨域相关）
}).then(function(canvas) {
var imgUri = canvas.toDataURL().replace("image/png", "image/octet-stream"); // 获取生成的图片的url
// console.log(imgUri)
console.log('完成')
$('.image').html('<img src="' + imgUri + '"/>')
});
} /**
* 将图片转换为base64
* 解决html2canvas跨域合成失败的问题
*/
/*第一种方法*/
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, , , img.width, img.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
}
function main(src, cb) {
var image = new Image();
image.src = src + '?v=' + Math.random(); // 处理缓存
image.crossOrigin = "anonymous"; // 支持跨域图片
image.setAttribute('crossorigin', ' *' ) // 支持跨域图片
image.onload = function() {
var base64 = getBase64Image(image);
cb && cb(base64);
}
} /*第二种方法*/
function getBase64ByUrl(src, callback, outputFormat) {
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if(xhr.status == ) {
var uInt8Array = new Uint8Array(xhr.response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while(i--) {
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
console.log(dataUrl)
callback.call(this, dataUrl);
}
};
xhr.send();
} /*第三种方法*/
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function() {
if(this.status == ) {
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
let base64 = e.target.result;
console.log("方式一》》》》》》》》》", base64)
};
oFileReader.readAsDataURL(blob);
//====为了在页面显示图片，可以删除====
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
let src = window.URL.createObjectURL(blob);
img.src = src
document.getElementById("container1").appendChild(img);
//====为了在页面显示图片，可以删除====
}
}
xhr.send();
} // 获取二维码URL
$.ajax({
method: 'GET',
url: window.BASE_URL + 'wx/accessToken',
contentType: 'application/x-www-form-urlencoded',
async: false,
dataType: "json",
data: {
openid: openid
},
success: function(data) {
console.log(data)
// $('.butright_img').attr('src', 'http://res.gzkny.com/9fdd7a57-3b4e-4c71-9aa9-ba28e766ed4c.jpg')
// $('#qrcode').html('<img src="' + data.data.url + '"/>')
// getBase64ByUrl('http://res.gzkny.com/9fdd7a57-3b4e-4c71-9aa9-ba28e766ed4c.jpg')
// getBase64('http://res.gzkny.com/9fdd7a57-3b4e-4c71-9aa9-ba28e766ed4c.jpg')
/*图片可能会跨域 把图片url转为base64*/
main(data.data.url, function(base64) {
console.log(base64)
$('.codebotom').html('<img class="butright_img" src="' + base64 + '"/>')
});
// 获取数据
$.ajax({
method: 'GET',
url: window.BASE_URL + 'api/v1/member/get',
contentType: 'application/x-www-form-urlencoded',
async: false,
dataType: "json",
data: {
access_token: access_token,
},
success: function(data) {
console.log(data)
if(data.error == 'success') {
$('.state').html(data.data.username)
/*执行代码转海报*/
setTimeout(function() {
downloadForJS()
}, )
}
}
});
}
});
})
</script> </html>
ios系统dom-to-image方法
<!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" id="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;"></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 / 6, //图片宽
imgHeight: height / 6, //图片高
src: src //图片中央的二维码
});
}
var url = 'https://api.gzkny.com/h5/aa.html?openid=' + openid;
createQRCode("qrcode", url, 80, 80, "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)
console.log('完成')
// document.body.appendChild(img);
$('.bot').html(img)
});
} /**
* 将图片转换为base64
* 解决html2canvas跨域合成失败的问题
* ios将图片转换为base64
*/
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, , , img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + ).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
} function ios(img) {
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function() {
var base64 = getBase64Image(image);
console.log(base64);
$('.codebotom').html('<img class="butright_img" src="' + base64 + '"/>')
}
} // 禁止屏幕滑动
function bodyScroll(event) {
event.preventDefault();
}
document.body.addEventListener('touchmove', bodyScroll, false);
$('body').css({
'position': 'fixed',
"width": "100%"
}); // 获取数据
$.ajax({
method: 'GET',
url: window.BASE_URL + 'wx/accessToken',
contentType: 'application/x-www-form-urlencoded',
async: false,
dataType: "json",
data: {
openid: openid
},
success: function(data) {
console.log(data)
/*ios将图片转换为base64*/
ios(data.data.url)
// 获取数据
$.ajax({
method: 'GET',
url: window.BASE_URL + 'api/v1/member/get',
contentType: 'application/x-www-form-urlencoded',
async: false,
dataType: "json",
data: {
access_token: access_token,
},
success: function(data) {
console.log(data)
if(data.error == 'success') {
$('.state').html(data.data.username)
/*ios系统dom-to-image方法*/
setTimeout(function() {
downloadForJS()
}, )
}
}
});
}
});
})
</script> </html>
不是太懂的可以留言
html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报的更多相关文章
- html2canvas以及domtoimage的使用踩坑总结
前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...
- php微信小程序生成二维码，出现乱码，{"errcode":44002,"errmsg":"empty post data"}，'{"errcode":41001,"errmsg":"access_token missing hint: [OoC.2a0822e255]"}'，以及其他的坑
微信小程序的坑简直比我的头发还多,今天下午获取微信二维码,遇到的44002,41001,还有图片没法正常显示以及小程序参数获取的问题,接下来一一解决 首先获取微信token然后再获取二维码这个没什么好 ...
- 关于微信小程序获取二维码的踩坑记录
1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...
- 小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
- 小程序踩过的一个小坑---解析二维码decodeURIComponent() url解码
因为我们需要用户扫码进入小程序,每一个货柜都有一个对应的二维码,当然每个二维码里的信息也不一样.用户扫码进入小程序之后,二维码的信息会以参数q带进去,而我们只能在onLoad事件中拿到这个参数, 但是 ...
- js生成二维码/html2canvas生成屏幕截图
1.需求简述 (1) 最初需求: 根据后台接口获取url,生成一个二维码,用户可以长按保存为图片.(这时的二维码只是纯黑白像素构成的二维码) 方案1: 使用jquery.qrcode.min.js插件 ...
- Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
// 下载二维码图片的方法 saveImg() { var self = this; html2canvas(document.querySelector(".savePic"), ...
- ASP.Net Core3.1 生成二维码填坑
ASP.Net Core3.1 使用QrCode生成二维码 部署到Linux报错 The type initializer for 'System.DrawingCore.GDIPlus' threw ...
- 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容
引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
随机推荐
- PowerDesigner 画流程图
原因: 以前赶时间写了n长一个类,现在又增加新需求了,but以前怎么写的忘了,虽然注释都有,一个一个方法的看很累,准备把它用面向对象改造一下,不知道时间够不,先试一试在说.之前设计数据库用的Power ...
- 微信小程序 按钮固定在页面底部遮住页面显示内容问题
我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题? 第一部分:问题的表现是怎么样的? 我设置了页面有0-99共100个数,但是 ...
- PhpStorm 设置自动FTP同步文件
1.添加一个FTP服务器 ① 首先在这里打开添加FTP的页面,步骤,工具栏 -> Tools -> Deployment -> Configuration . ②添加服务器 ...
- 基于Spring Boot+Cloud构建微云架构
前言 首先,最想说的是,当你要学习一套最新的技术时,官网的英文文档是学习的最佳渠道.因为网上流传的多数资料是官网翻译而来,很多描述的重点也都偏向于作者自身碰到的问题,这样就很容易让你理解和操作出现偏差 ...
- Ubuntu系统之Hadoop搭建
作业来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3223 一.在Window中安装Oracle VM VirtualBox 二 ...
- react项目如何运行
react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...
- 012 spring retry重试原理的解析
有点复杂,在后续的章节,将会对其中涉及到的知识点,再分章节进行说明. 1.程序结构 2.@Retryable package com.jun.web.annotation.theory; import ...
- NTP时钟同步配置
NTP在Linux下有两种时钟同步方式: 直接同步(也称跳跃同步)和平滑同步(也称微调同步). 直接同步 使用ntpdate命令进行同步,直接进行时间变更. 如果服务器上存在一个12点运行的任务,当前 ...
- js object 添加键值
第一种方法let obj ={"name":"tom","age":16}let key = "id";let valu ...
- DEPICT实现基因优化（gene prioritization）、gene set富集分析（geneset enrichment）、组织富集分析（tissue enrichment）
全基因组关联分析除了找到显著的关联位点,我们还可以做基因优化.geneset富集分析.组织富集分析,下面具体讲一讲怎么利用GWAS的summary数据做这个分析. summary数据就是关联分析的结果 ...