記錄使用html2canvas，生成海報

原理：使用canvas繪畫DOM，轉成圖片

html2canvas： html2canvas

 

引入：html2canvas.min.js

 

1、使用dom把你要生成的海報組裝好，如果當用戶點擊的時候在去展示海報的話，可以吧海報定位到 z-index：-1； 不要使用隱藏（如果隱藏的話是無法生成海報的）

 

 

 

2、上代碼

                        
            var copyDom = $('.Posters')[0];   //海報dom
            var width = copyDom.offsetWidth;
            var height = copyDom.offsetHeight;
            var canvas = document.createElement("canvas");
　　　　　　　//這里為了讓圖片清晰放大了6倍
            var scale = 6; //放大四倍，讓圖片變的高清
            canvas.width = width * scale;
            canvas.height = height * scale;
            canvas.getContext("2d").scale(scale, scale);
　　
            var opts = {
                scale: scale,
                canvas: canvas,
                width: width,
                height: height
            };

            html2canvas(copyDom, opts).then(canvas => {
　　　　　　　　　　//canvas轉base64
                let dataURL = canvas.toDataURL("image/png");
                $('.PostersImg img').attr('src', dataURL);
　　　　　　　　　　　　//layer彈出框

　　　　　　　　　　　　layer.open({
                        type: 1,
                        shadeClose: true,
                        closeBtn: false,
                        title: '',
                        area: ['80%'],
                        content: $('.PostersImg'),
                    })

　　　　　　　　});

 

 3、展示