页面转化成海报图

应需求 需要把页面转化成海报图  第一下看到这个需求一脸懵逼  不知道从何下手

后来探(bai)索(du)了一下才发现原来可以用html2canvas来生成图片

方法记录一下  以备不时之需

用npm install一下html2canvas  然后再页面中引入就可以愉快的开始了

页面上：

<div class="poster-btn" @click="downLoad('posterHtml','测试')">生成图片</div>

js中

        /* 第一个参数为需要保存的div的id名  

           第二个参数为保存图片的名称 */

        downLoad(divText, imgText) {

            let canvasID = this.$refs[divText];

            let that = this;

            let a = document.createElement('a');

            html2canvas(canvasID).then(canvas => {

                let dom = document.body.appendChild(canvas);

                dom.style.display = 'none';

                a.style.display = 'none';

                document.body.removeChild(dom);

                let blob = that.dataURLToBlob(dom.toDataURL('image/png'));

                a.setAttribute('href', URL.createObjectURL(blob));

                //这块是保存图片操作  可以设置保存的图片的信息

                a.setAttribute('download', imgText + '.png');

                document.body.appendChild(a);

                a.click();

                URL.revokeObjectURL(blob);

                document.body.removeChild(a);

            });

        },

 

        //图片转换格式的方法

       dataURLToBlob(dataurl) {

            let arr = dataurl.split(',');

            let mime = arr[0].match(/:(.*?);/)[1];

            let bstr = atob(arr[1]);

            let n = bstr.length;

            let u8arr = new Uint8Array(n);

            while (n--) {

                u8arr[n] = bstr.charCodeAt(n);

            }

            return new Blob([u8arr], { type: mime });

        },

这里要注意一件事  后端传过来的图片直接显示再页面上能正常显示  但是页面转化为图片就不显示了 

我这边是让后端以base64的格式将图片传给我  就解决了这个问题：

<img :src="'data:image/png;base64,'+item.image" class="poster-img" />