vue使用html2Canvas将页面中的一部分内容保存为图片

vue使用html2Canvas将页面中的一部分内容保存为图片

安装并引入html2Canvas

npm i html2canvas -S

引入

import html2canvas from 'html2canvas'

使用（html标签）

<!-- 以$refs选中DOM -->
<div ref="vueDomSaveToImage">
	<!--   页面内容，正常写html及css即可，这部分会被保存为图片   -->
</div>
<el-button type="primary" @click="saveToImage">保存图片</el-button>

保存方法实现 js

	/** 保存为图片 */
    function saveToImage(){
      Loading.service({text:'正在导出...',background:'rgba(0,0,0,0.7)'});	//等待loading,可不要，直接去掉
      this.$nextTick(()=>{
        html2Canvas(this.$refs.vueDomSaveToImage).then(res=>{
          let imgUrl = res.toDataURL('image/png')
          // console.log('图片临时地址',imgUrl)
          let aLink = document.createElement('a');
          aLink.href = imgUrl;
          aLink.download = new Date().toLocaleString() + '.png';	//导出文件名，这里以时间命名
          document.body.appendChild(aLink);
		  // 模拟a标签点击事件
          aLink.click()
		  // 事件已经执行，删除本次操作创建的a标签对象
          document.body.removeChild(aLink)
          // // 以服务的方式调用的 Loading 需要异步关闭
          setTimeout(() => {
              Loading.service().close();
			  console.log(''图片导出成功)
            }, 10);
          })
      })
	},
	// 方法二, 原理和方法一是一样的，都是借助a标签
	function saveToImage2(){
		this.$nextTick(()=>{
			html2Canvas(this.$refs.vueDomSaveToImage).then(res=>{
				const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
				save_link.href = imgUrl;
				save_link.download = new Date().toLocaleString()+ '.png';
				const event = document.createEvent('MouseEvents');
				event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
				save_link.dispatchEvent(event);
			})
		})
	}

若被保存的DOM中有网络资源图片保存不了，保存后图片位置空白：
可以将图片url转化为base64，显示到页面再保存（此操作在保存动作之前，最好页面一加载就做）

图片url转base64

	/** 图片url转base64, 以回调函数返回结果 */
	function getImageBase64(url, callback) {
        var Img = new Image(), dataURL = '';
        Img.src = url + '?v=' + Math.random();
        // 使用canvas去生成dataURL，避免二次请求，在创建Image对象的时候，给image对象设置了如下属性（目的是为了避免出现canvas污染的问题）
        Img.setAttribute('crossOrigin', 'Anonymous');
        Img.onload = function() {
			var canvas = document.createElement('canvas'),
			width = Img.width,
			height = Img.height;
			canvas.width = width;
			canvas.height = height;
			canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
			dataURL = canvas.toDataURL('image/jpeg');
			return callback ? callback(dataURL) : null;
        };
    }

getImageBase64('https://tse3-mm.cn.bing.net/th/id/OIP-C.rHuc8SKa0wLVwCqqA27uIwHaEt?pid=ImgDet&rs=1',(uu)=>{
   console.log('base转化结果：',uu)
})