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小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
随机推荐
- graphql-query-rewriter 无缝处理graphql 变更
graphql-query-rewriter 是一个graphql schema 变动重写的中间件,可以帮助我们解决在版本变动,查询实体变动 是的问题,从目前已知的技术中我们可选的方案有以下处理变动的 ...
- python 使用xpath解析含有命名空间(xmlns)的xml
解决办法: from lxml import etree xml = etree.parse("./cee.xml") root = xml.getroot() print(roo ...
- leetcode 一些算法题及答案
1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...
- 用户画像（User Profile）
什么是用户画像? 用户画像是根据某个具体的用户的人口学特征.网络浏览内容.网络社交活动和消费行为等信息而抽象出的一个标签化的用户模型.例如某用户的画像是:男,31岁,已婚,收入1万以上,爱美食,团购达 ...
- c++ Size capacity Resize reserve shrink_to_fit
- 【数据结构】Java版
有趣有内涵的文章第一时间送达! 喝酒I创作I分享 生活中总有些东西值得分享 @醉翁猫咪 想你吴亦凡;赵丽颖 - 想你 你是程序猿对吗?会写代码的那种? 我是打字猿?会打代码的那种? 现在告诉大家一个很 ...
- BMP图像信息隐藏
图像隐写算法LSB—Least Significant Bits,又称最不显著位.LSB算法就是将秘密信息嵌入到载体图像像素值得最低有效位,改变这一位置对载体图像的品质影响最小. 原理如下: 以实验用 ...
- queue怎么用咧↓↓↓
queue(队列) 定义:queue <int> a; 插入队尾:a.push(x); 查询队尾:a.back(); 查询队首:a.front(); 删除队首:a.pop(); 查询长度: ...
- cnetos6.5安装Varnish
安装依赖包: tar -zxvf docutils-0.13.1.tar.gz python setup.py install unzip pcre2-10.23.zip ./configure -- ...
- centos安装redis 5.0版本的集群
我在本地VM-Centos里安装5.0.5时安装遇到了些问题,参考了Blog:https://www.cnblogs.com/shawhe/p/9548620.html 顺利安装完成. 安装redis ...