html2canvas以及domtoimage的使用踩坑總結 動態獲取的二維碼失效如何生成海報

時間  2020-05-19
標籤 html2canvas html canvas 以及 domtoimage 使用 總結 動態 獲取 二維 失效 如何 生成 海報 欄目 HTML 简体版
原文   原文鏈接 
//判斷手機爲安卓仍是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') > -1 || u.indexOf('Adr') > -1; //android終端
    if(isiOS) {
        window.location.href = "mycodeios.html"
    } else if(isAndroid) {
        window.location.href = "mycode.html"
    }
})

安卓html2canvas方法javascript

<!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: 0 !important;
            }
            
            .container {
                max-width: 750px;
                min-width: 32px;
                margin: 0 auto;
                background: #FFFFFF;
            }
            
            .zhe {
                position: fixed;
                max-width: 750px;
                min-width: 32px;
                width: 100%;
                height: 100%;
                background: #45A196;
                z-index: 9;
            }
            
            .imge {
                position: absolute;
                max-width: 750px;
                min-width: 32px;
                width: 90%;
                height: 100%;
                margin: 0% 5%;
                z-index: 99;
                /*background: url(codeimg/code.jpg) no-repeat;*/
                /*background-size: contain;*/
            }
            
            .left {
                position: absolute;
                left: 12%;
                top: 70%;
                color: #FFFFFF;
                font-size: 26px;
                letter-spacing: 5px;
            }
            
            .bottom {
                position: absolute;
                right: 38%;
                top: 65%;
            }
            
            .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: 15%;
                color: #4BA59B;
                padding: 10px 20%;
                border-radius: 3px;
                z-index: 9999;
                color: #ffffff;
                text-align: center;
            }
            
            .image {
                display: block;
                max-width: 750px;
                min-width: 32px;
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background: #FFFFFF;
                z-index: 9999;
            }
        </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[1]
            var access_token = openid_list[0]
            
            /*監聽返回 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, 0, 0, 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 == 200) {
                        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 == 200) {
                        //獲得一個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()
                                }, 1000)
                            }
                        }
                    });
                }
            });
        })
    </script>

</html>

ios系統dom-to-image方法css

<!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: 100%;
                height: 100%;
            }
            
            .container {
                max-width: 750px;
                min-width: 32px;
                margin: 0 auto;
                position: relative;
            }
            
            .imge {
                position: relative;
                max-width: 750px;
                min-width: 32px;
                width: 100%;
                height: 100%;
                z-index: 99;
            }
            
            .left {
                position: absolute;
                left: 12%;
                margin-top: 116%;
                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: 40%;
                z-index: 9999;
                color: #ffffff;
            }
            
            .image {
                display: block;
                max-width: 750px;
                min-width: 32px;
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background: #FFFFFF;
                z-index: 9999;
            }
        </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[1]
            var access_token = openid_list[0]

            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, 0, 0, img.width, img.height);
                var ext = img.src.substring(img.src.lastIndexOf(".") + 1).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()
                                }, 1000)
                            }
                        }
                    });
                }
            });
        })
    </script>

</html>

不是太懂的能夠留言html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程