效果图(源码下载地址在文章底部)：
![]()
打码效果图(简书禁止显示二维码)
打码效果图(简书禁止显示二维码)
html源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成海报</title>
<style type="text/css">
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%
}
body {
margin: 0px;
width:100%;
height:100%;
font-family: "华文细黑";
background: url("pc/xingkong.jpg") no-repeat;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
"
}
.upm-setting_header_img {
margin-top: 180px;
margin-left: 60px;
padding: 0;
display: block;
width: 10.33333rem;
height: 10.33333rem;
border-radius: 1.33333rem;
margin-right: 0.32rem;
}
.upm-setting_header_img2 {
margin-top: 0px;
margin-left: 40px;
padding: 0;
display: block;
width: 10.33333rem;
height: 10.33333rem;
border-radius: 1.33333rem;
margin-right: 0.32rem;
}
.uname {
margin: 1px;
margin-top: 60px;
margin-left: 650px;
font-size: 30px;
display: block;
color: white;
}
.uname0 {
margin: 1px;
margin-top: 60px;
margin-left: 450px;
font-size: 40px;
display: block;
color: white;
}
.uname2 {
margin: 1px;
margin-left: 28px;
font-size: 50px;
display: block;
color: white;
}
.uname3 {
margin: 1px;
margin-left: 28px;
font-size: 40px;
display: block;
color: white;
}
.qianduanwz2 {
margin: 1px;
margin-left: 28px;
font-size: 40px;
display: block;
}
.qianduanwz {
height: 200px;
width: 100%;
position: fixed;
top: 0;
}
.footer {
height: 200px;
width: 100%;
position: fixed;
bottom: 0;
}
.share{
width:70%;
height:120px;
border-radius:100px;
position: fixed;
bottom: 0;
margin-left:140px;
margin-top: 0px;
font-size: 60px;
background-color:skyblue;
}
.imgDiv{
width: 100%;
height: 100%;
/* display: table-cell; */
text-align: center;
vertical-align: middle;}
/* color: #fff; */
</style>
</head>
<body>
<div class="haibao" id="haibao">
<div class="wenzi" id="wenzi">
<div class="qianduanwz" id="qianduanwz">
<div id="left" style="width:70%;float:left;"><p class="uname3">扫码查看运势<p /><p class="uname3">扫码领取口罩<p /></div><div id="right" style="width:30%;float:left;"><img src="pc/erwei.jpg" class="upm-setting_header_img2"></div>
</div>
<div class="qianduanwz2" style="visibility:hidden">
<p class="uname2">yy
<p />
</div>
<div class="qianduanwz2" style="visibility:hidden">
<p class="uname2">yy
<p />
</div>
<div class="qianduanwz2" style="visibility:hidden">
<p class="uname2">yy
<p />
</div>
<div class="qianduanwz2" style="visibility:hidden">
<p class="uname2">yy
<p />
</div>
<div class="qianduanwz2" style="margin-left:300px">
<p class="uname2">您的鼠年预言
<p />
</div>
<div class="qianduanwz2" style="visibility:hidden">
<p class="uname2">yy
<p />
</div>
<div class="qianduanwz2" style="margin-left:300px">
<p class="uname2" id="fateTitle">缺失的日记
<p />
</div>
<div class="qianduanwz2">
<p class="uname2" id="fateContent0">
<p />
</div>
<div class="qianduanwz2">
<p class="uname2" id="fateContent1">
<p />
</div>
<div class="qianduanwz2">
<p class="uname2" id="fateContent2">
<p />
</div>
<div class="qianduanwz2">
<p class="uname2" id="fateContent3">
<p />
</div>
<div class="qianduanwz2">
<p class="uname2" id="fateContent4">
<p />
</div>
</div>
<div class="footer" id="footer">
<input type="button" id="share" class="share" onclick="share()" value="分享到朋友圈"/>
</div>
</div>
</body>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
var str="重要的日历缺失了一部分,被遗忘的月份将会被胜大地吊唁,去享受这幕间休息时间,出发时可往东去,一定遇到等待你的人";
var strs = str.split(',');
var i=0;
var j=0;
window.onload=function typing(){
var pname = "fateContent"+j;
//获取div
var mydiv=document.getElementById(pname);
mydiv.innerHTML+=strs[j].charAt(i);
i++;
var id=setTimeout(typing,200);
if(i==(strs[j].length)){
j++;
if(j==strs.length&&i==(strs[j-1].length)){
clearTimeout(id);
}
i=0;
}
}
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var scale = 4;
canvas.width = 70 * scale;
canvas.height = 70 * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: 70, //dom 原始宽度
height: 70,
useCORS: true // 【重要】开启跨域配置
};
function share(){
$("#qianduanwz").remove();
$("#share").remove();
$("#footer").append("<div id='left' style='width:70%;float:left;'><p class='uname3'>扫码查看运势<p /><p class='uname3'>扫码领取口罩<p /></div><div id='right' style='width:30%;float:left;'><img src='pc/fate.png' class='upm-setting_header_img2'></div>");
var copyDom = document.body; //要保存的dom
var width = copyDom.offsetWidth; //dom宽
var height = copyDom.offsetHeight; //dom高
var scale = 2; //放大倍数
new html2canvas(document.body, {
dpi: window.devicePixelRatio * 2,
scale: scale,
width: width,
heigth: height,
useCORS: true // 【重要】开启跨域配置
}).then(function (canvas) { //1.0.0版本的有then方法
//返回图片dataURL，参数：图片格式和清晰度(0-1)
// var dataURL = canvas.toDataURL("image/png", 1.0);
let oImg = new Image();
// oImg.src = canvas.toDataURL();
var dataURL = canvas.toDataURL("image/png", 1.0);
$("#haibao").remove();
$(document.body).css("background-image","url('pc/car1.jpg')");
// document.body.append(oImg);
$(document.body).append("<div class='imgDiv'><img src='"+dataURL+"' alt='命运卡片' style='width:90%;height:90%'/></div>");
});
}
</script>
</html>
需要引入的js文件：
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
在线演示：
在线演示(手机打开最佳):https://xson.cc/fate.html
文件源码下载：
文件源码下载.png
