html生成海报图片(前端生成图片)

效果图(源码下载地址在文章底部):
打码效果图(简书禁止显示二维码)
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

文件源码下载:

https://xson.cc/?page=1

文件源码下载.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容