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();
},