项目需求生成动态海报:比如背景图固定,一些文案和头像等需要动态生成,可以使用html2canvas插件:
基础用法
handleCanvas () {
// 用法:html2canvas(dom,{options}).then(canvas => {})
html2canvas(this.$refs.extendCapture, {
allowTaint: true,
useCORS: true
}).then(canvas => {
// canvas.toDataURL可转成base64图片
let dataURL = canvas.toDataURL('image/png')
if (dataURL !== '' && dataURL !== 'data:,') {
this.imgUrl = dataURL
}
})
}
具体可见官网:https://www.npmjs.com/package/html2canvas
常见问题
1、dom内包含图片跨域,转成canvas后不显示
设置参数可跨域:
{ allowTaint: true, useCORS: true }
2、图片清晰度不够
不要用background,尽量用img标签
3、ios11.4在微信中html2canvas不执行
修改插件版本为rc4,或改源码,具体见:https://blog.csdn.net/cindy647/article/details/109123101