Div通過html2canvas.js生成一張圖片(可跨域)

第一次開發圖片合成時的解決方案:

html

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

js:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

js地址：http://html2canvas.hertzen.com/dist/html2canvas.js

官網地址：http://html2canvas.hertzen.com/

html2canvas(document.querySelector(".poster_template_con"),{useCORS:true,logging:true}).then(canvas => {
                document.body.appendChild(canvas);
            });

谷歌和百度瀏覽器的非IE內核支持，但是用微信瀏覽器打開html2canvas.js無法獲取到微信頭像。

解決方案：把頭像下到服務器上用自己服務器的頭像地址

 

第二次開發圖片合成的解決方案: (微信頭像可跨域直接合成,無需先下載)

 var canvas = document.createElement("canvas");
        canvas.width = $('#baseimg')[0].offsetWidth * 2;    //把需合成的多張圖片放一個DIV中
        canvas.height = $('#baseimg')[0].offsetHeight * 2;   //寬高是div的兩倍
        let opts = {
            canvas: canvas,                       // 將自定義canvas作爲配置項
            useCORS: true,                        // 允許圖片跨域
            //height: 1920,  // 修復截圖不完整問題
            //width: 2080  // 修復截圖不完整問題
        }
        html2canvas($("#divImg")[0], opts).then((canvas) => {
            /* 此處的base64ImgSrc就是得到的img的base64字符串，直接在頁面上顯示即可 */
            var base64ImgSrc = canvas.toDataURL("image/png");
            //$('#imgF').attr('src', base64ImgSrc);

            /* 如果只是顯示,可用以下代碼 */
            let img = document.createElement("img");
            img.id = "imgF";
            img.src = base64ImgSrc;
            $('#divC')[0].appendChild(img); //divC是展示合成圖片的容器
            $('#imgF').height("100%");       //在這裏js給了剛生成的img一個id,用jquery設置寬高
            $('#imgF').width("100%");        //直接設置試了下沒起作用.
        })

html代碼:

 <div id="div1" style="position:absolute;width:100%;height: 660px; background-image: url(image/按鈕.jpg); background-size: 100% 100%;">
        <div id="divImg" style="width: 80%;height: 85%;left: 11.9%;position: relative;top: 2%;">
            <img id="baseimg" src="image/1.jpg" style="width: 100%;position:relative;height:100%; top: 0px; left: 0px;" />
            <img id="imgUser"  style="position: absolute;height: 8.6%;left: 43.1%;top: 14.1%;z-index: 0;border-radius: 50%;" />
        </div>
        <div id="divBtn" style="position: absolute; height: 6%; width: 42%; left: 28%; bottom: 5%;" οnclick="save()"></div>
    </div>



    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="text-align: center">
            <div id="divC" style="height: 100%; width: 100%;"></div>
            <div style="color: white; font-size: 18px;">
                長按保存
            </div>
        </div>
    </div>

divImg是需合成的div  baseimg是待合成的底圖,imgUser是微信頭像 divC是合成後添加的容器