1.截屏插件html2canvas
npm install html2canvas --save
使用
import html2canvas from 'html2canvas'
html2canvas(el,options).then(canvas=>{})
实例
html2canvas(document.getElementById('box'),{ backgroundColor:null, useCORS:true }).then((canvas)=>{ this.dataURL = canvas.toDataURL("image/jpeg",1) console.log(this.dataURL) })
截取出某个div内部的样式(box),将他们绘画成为canvas
常见问题:
1.图片不清晰:
需要将背景图片换为img图片
2.请求的数据图片加载不上
需要设置跨域
useCORS:true
3.文字不清晰:
查看百度即可
2.cordova微信分享图片
html2canvas(document.getElementById('box'),{ backgroundColor:null, useCORS:true }).then((canvas)=>{ this.dataURL = canvas.toDataURL("image/jpeg",1) console.log(this.dataURL) Wechat.share({ message:{ title:'text', description:'this is description', thumb: "",//分享时候可以看到的图 media:{ type:Wechat.Type.IMAGE, image:this.dataURL, } }, scene:Wechat.Scene.SESSION//分享到好友scene:Wechat.Scene.TIMELINE//分享到朋友圈
},()=>{ alert('success') },()=>{ alert('error') }) })