html2cavans 插件

vue移动端微信公众号项目应用html2cavans插件实现将html内容转为图片并保存到相册（实测兼容安卓，ios）

问题1：安卓端可生成图片，ios端系统在13版本以下的生成失败

解决 ：修改npm html2cavans的版本

先移除之前安装的 npm uninstall html2canvas
然后安装指定版本 npm install --save html2canvas@1.0.0-rc.4

问题2：安卓端图片保存失败

解决 ：将html2cavans生成的图片转为base64格式

问题3：canvas.toDataUrl()获取base64字符串表示形式，结果打印为“data：，”

解决 ：可能因为页面还没渲染好，获取不到要生成图片的内容，用 nextTick 确保页面数据渲染完成

问题4：需要生成的图片内容中包含图片，产生跨域问题，生成后的图片位置为空白并报错 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

解决 ：添加配置useCORS: true + 图片中设置 crossOrigin=“anonymous” + 修改源文件（给imgUrl加上随机数）

以下为代码

<div id="qqq" ref="qqq" v-else>
    <img v-if="result.indexOf('cover')!=-1" :src="ItemImg" />
    <div v-if="result.indexOf('ItemName')!=-1">{{ItemName}}</div>
    <div v-if="result.indexOf('ItemDesigner')!=-1">{{ItemDesigner}}</div>
</div>

<div @click="create" class="createbutton">生成海报</div>

<van-popup v-model="dialogTableVisible" id="pop" ref="pop" @close="closePop">
</van-popup>

var opts = {useCORS: true};

create(){
	this.$nextTick(()=>{	//添加nextTick主要是加一层页面已渲染完的保障
	   html2canvas(this.$refs.qqq, opts).then(canvas => {
	       this.dialogTableVisible = true;
	       //在微信中如果不放到img标签中，canvas长按是没有效果的
	       var img = new Image();
	       img.setAttribute('crossOrigin', 'anonymous')
	       img.src = canvas.toDataURL('image/png', 1.0)
	       //转为url后路径为blob:http://xxxxxxxx,安卓端保存失败
	       //img.src = URL.createObjectURL(this.dataURLToBlob(canvas.toDataURL('image/png', 1.0))) ;
	       this.$nextTick(()=>{
	           img.setAttribute("class", "downImg");
	           document.getElementById("pop").appendChild(img);
	       })
	   })
	});
},
closePop(){
    this.showPic = false
    $('#pop').empty();
},