vue使用html2canvas将dom转化为图片

1、简述

最近在做的项目中，需要将界面转换成图片保存下来并发给后台，于是在网上查看了有个html2canvas 的js库可以将HTML生成图片，保存及获取的时候直接使用图片

2、安装html2canvas

npm install html2canvas --save-dev

3.使用

3.1.在你需要使用的页面中引入html2canvas

import html2canvas from 'html2canvas';

3.2.将需要转换为图片的dom，用一个单独的div给他包裹上，

 <div id="nodeBox" ref="getImageDom">
	<!-- 需要转换为图片的dom -->
 </div> 

3.3.触发事件的方法获取图片
html ：

 <div class="selected" @click="changeImageDom">点击触发转换事件</div>

javascript：

 changeImageDom() {
            let myBox = this.$refs.getImageDom;
            console.log(window.screen.availWidth, window.screen.availHeight
                , document.body.scrollWidth, document.body.scrollHeight, window.pageYOffset);
            html2canvas(myBox, {
                useCORS: true,
                width: window.screen.availWidth,
                height: document.body.scrollHeight,
                windowWidth: document.body.scrollWidth,
                windowHeight: document.body.scrollHeight,
                x: 0,
                y: window.pageYOffset
            }).then(function (canvas) {
                let imgUrl = canvas.toDataURL("image/jpeg", 1);
                var eleLink = document.createElement('a')
                eleLink.href = imgUrl // 转换后的图片地址
                eleLink.download = 'pictureName'
                // 触发点击
                document.body.appendChild(eleLink)
                eleLink.click()
                // 然后移除
                document.body.removeChild(eleLink)
                console.log(data)
            }); 
        },

4.常见问题

若是dom中有图片，图片可能会出现跨域的问题的解决

1. 若是地址跨域可以试试将地址转化为base64形式在进行下载
2. 若上面的方法不行，图片地址是cdn图片跨域，建议找运维查看一下cdn的域名是不是设置不允许跨域，若是设置了建议修改一下（一般情况是服务器自动就有限制跨域）