如何生成动态海报

海报"/>

如何生成动态海报

项目需求生成动态海报：比如背景图固定，一些文案和头像等需要动态生成，可以使用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}})}

具体可见官网：

常见问题

1、dom内包含图片跨域，转成canvas后不显示

设置参数可跨域：

{ allowTaint: true, useCORS: true }

2、图片清晰度不够

不要用background,尽量用img标签

3、ios11.4在微信中html2canvas不执行

修改插件版本为rc4，或改源码，具体见：

参考文档：