安卓端截图
//html代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>生成海报</title>
<script src="https://statics.jcpeixun.com/common/jquery-1.11.3.js"></script>
<!--引入插件-->
<script src="js/dom-to-image.js"></script>
<script src="js/html2convert.js"></script></script>
</head>
<body>
<p class=" inviteBill flexcc">生成海报</p>
<div id="dom">
<img src="https://p6-passport.byteacctimg.com/img/user-avatar/0844c224c247686d50ea3f1f8c0f0e9d~300x300.image"
alt="">
</div>
//显示图片
<div id="domImg" class="domImg"></div>
</body>
</html>
//css样式
<style>
.inviteBill {
width: 200px;
border-collapse: collapse;
border: 1px solid rgb(0, 0, 0);
background: pink;
cursor: pointer;
}
</style>
Js代码
$(function () {
//生成海报并打开弹窗
$(".inviteBill").click(function () {
if (!$("#domImg").html()) {//为空则执行
initDomToImg();
} else { //存在图片就直接显示
alertOpenByName("alertBill");
}
})
})
function initDomToImg() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
saveImage1()
}
if (isiOS) {
saveImage2()
}
}
// 生成图片 安卓设备
function saveImage1() {
var node = document.getElementById('dom');
domtoimage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
$("#domImg").html(img);
alertOpenByName("alertBill");
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
// 苹果设备
function saveImage2() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取页面滚动高度
var copyDom = document.getElementById('dom');
html2canvas(copyDom, {
allowTaint: false, //是否允许跨域图像污染画布
useCORS: true, //是否尝试使用CORS从服务器加载图像
height: copyDom.offsetHeight, //画布的宽度
width: copyDom.offsetWidth, //画布的高度
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
y: scrollTop, // 用网页滚动的高度定位y轴顶点
dpi: window.devicePixelRatio * 2,
scale: 2, //缩放比例,默认为1
// backgroundColor: '#fff', //画布的背景色，默认为透明
}).then((canvas) => {
//将canvas转为base64格式，生成图片链接
let dataURL = canvas.toDataURL("image/png");
var img = new Image();
img.src = dataURL;
$("#domImg").html(img);
alertOpenByName("alertBill");
})
}
效果图：
