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小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
随机推荐
- JS实现Base64编码、解码，即window.atob，window.btoa功能
window.atob(),window.btoa()方法可以对字符串精选base64编码和解码,但是有些环境比如nuxt的服务端环境没法使用window,所以需要自己实现一个base64的编码解码功 ...
- javascript 中的方法注入
js 中的方法注入 java中很多框架支持 apo 的注入, js中也可以类似的进行实现 主要是通过扩展js中方法的老祖 Function 对象来进行实现. Function.prototype.af ...
- 安利一个github上面的一个神级库thefuck，Linux命令敲错了，没关系，自动纠正你的命令
没错就是这么神奇,名字相当噶性,thefuck.当你命令输入错误不要怕,直接来一句fuck,自动纠正你输入的命令. 在你输入错误的命令的时候,忍俊不禁的想来一句fuck,没错你不仅可以嘴上说,命令里面 ...
- 不能对以下表使用 TRUNCATE TABLE
1.由 FOREIGN KEY 约束引用的表.(您可以截断具有引用自身的外键的表.) 2.参与索引视图的表. 3.通过使用事务复制或合并复制发布的表. 4.对于具有以上一个或多个特征的表,请使用 DE ...
- php . extension_loaded
(PHP 4, PHP 5, PHP 7) extension_loaded — 检查一个扩展是否已经加载 如果 name 指定的扩展已加载,返回TRUE,否则返回 FALSE. Example #1 ...
- var a = function(){}和var a = function(){}();的区别
var a = function(){ ... ... ... } 声明方法. var a = function(){ ... ... ... }(); 声明方法并执行 demo: var u = f ...
- Server concepts 详解
server status 是由 vm_state和task_state 计算出来的,vm_state是虚机当前的稳定状态(例如Active, Error),task_state是虚机当前的瞬间状态( ...
- pgsql 聚合函数array_to_string，ARRAY_AGG
array_to_string--将sql中的数组转为字符串 ARRAY_AGG--将sql中的数据转为数组处理 以下给大家一个简单的例子即可体会: 1.需求 2.数据库中原数据 1.pn ...
- [web 前端] 封装简单的axios库
转载自https://blog.csdn.net/qq_35844177/article/details/78809499 1.新建http.js文件,封装axios get post 方法 impo ...
- phpstudy5.6 No input file specified的解决方法
一.问题描述 5.6就提示这个错误,切换5.5就可以 二.原因分析 原因1:提示:“No input file specified.”原因在于使用的PHP5.6是fast_cgi模式,而在某些情况下, ...