移动端HTML海报生成分享

ShareProject.zip

移动端HTML海报生成分享,利用了layerui+html2canvas+canvas2image+qrcode 生产海报 将htmlDOM 元素转成canvas在调用canvas转图片并且调用qrcode生成二维码保存到图库

立即下载

移动端HTML海报生成分享

DEMO

前端利用html2canvas生成海报图,长按分享

(1)使用 html2canvas 官方Demo

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
    </style>
<body>
    <div id="capture" style="padding: 10px; background: #f5da55;margin-bottom: 10px;">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script src="js/html2canvas.min.js"></script>
    
    <script>
        html2canvas(document.body).then(function(canvas) {
            let dataURL=canvas.toDataURL("image/png");
            console.log(dataURL)
            document.body.appendChild(canvas);
        });
    </script>
</body>
</html>
 

将html生成canvas返回base64时在页面上显示,在微信H5页面上除IOS13.4版本上失效外,其他设备正常生成使用

//利用手机调试看看那个地方代码失效或报错
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端HTML海报生成分享</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
    </style>
    
<body>
    <div id="capture" style="padding: 10px; background: #f5da55;margin-bottom: 10px;">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>

    <script src="js/html2canvas.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>  //调试js
    <script>
        eruda.init();  //初始化
		console.log("手机代码调试")  //打印输出
        html2canvas(document.body).then(function(canvas) {
            console.log("加载DOM转Cnavas")
            let dataURL=canvas.toDataURL("image/png");
            console.log(dataURL)
            document.body.appendChild(canvas);
        });
    </script>
</body>
</html>

IOS 13.4.1
IOS 13.4.1海报生成

安卓海报生成

	//结果手机调试后发现这段代码始终进不去
	html2canvas(document.body).then(function(canvas) {
	});

查看官方github找到了问题所在 html2canvas not working on wechat when iphone8plus update to ios 13.4.1 #2205
在这里插入图片描述
综上所述
html2canvas(1.0.0-rc.5)最新版不支持,需要下载html2canvas(1.0.0-rc.4)版本即可满足设备兼容性要求

Project

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>移动端HTML海报生成分享</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    
    <div class="shoaw">
        <div class="content">
            <img class="bgImg" src="images/bgImg.png"/>
            <div id="Name"><text>加油!</text></div>
            <div id="qrcode"></div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="layer/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <script src="js/canvas2image.js"></script>
    <script type="text/javascript" src="js/qrcode.min.js"></script>
    <script>

        $(function(){
           

    
            var index =layer.open({
                type: 2
                ,content: '加载中'
            });
            QrCodeFunction();
             //将html 生成canvas 动态绑定img
            //  $(".content .bgImg").attr("src","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg");
            //  if($(".content .bgImg").attr("src")!="")
            //  {  
            //     console.log("进入if判断")
            //     $(".bgImg").get(0).onload = function (){ 
            //         console.log("进入图片调用方法")
            //          HtmlConvertCanavas(index);
            //     };
                
            //  }
            //  else{
            //     console.log("进入else判断")
            //     layer.close(index);
            //  }


            HtmlConvertCanavas(index);
        
        });
        function QrCodeFunction() {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: "http://www.baidu.com",
                width:55,
                height:55,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            this.qrCode = document.querySelector('img');          
            return this.qrCode;
        }
        function HtmlConvertCanavas(index) {
            console.log("进入图片生成Canvas方法")
            var app = $(".content").get(0); //将jQuery对象转换为dom对象
            console.log("app="+app.innerHTML)
            
            html2canvas(app, {
                scale:2,
                useCORS:true,
                logging:true
            })
            .then(function(canvas) {
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;
                //调用Canvas2Image插件  canvas 转成图片
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                $(".content").html(img);
                layer.close(index);
            })

        }

    </script>
</body>

</html>

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 点我我会动 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读