html2canvas 生成海报

应用场景

移动端H5 分享海报

安装html2canvas 插件

npm install --save html2canvas

Vue中使用

// 在Vue页面中引入
import html2canvas from "html2canvas";
// 配置信息获取
let domCanvas = this.$refs.toimg；//  当前页面需要转化为海报的元素dom
let width = domCanvas.scrollWidth；// 宽度 
let height = domCanvas.scrollHeight;// 高度
let scale = 2; // 放大倍数
// 参数
let opts = {
     scale: scale, 
     width: width,
     height: height,
     useCORS: true // 开启跨域配置
}
// 生成海报方法
html2canvas(domCanvas, opts).then(canvas => {
  // 获取海报图片链接
   this.imgUrl = canvas.toDataURL();
}).catch(err => {
   console.log('html2canvas报错', err)
});

兼容处理

服务器图片资源，跨域处理

1. 前端需要做的

// html2canvas配置开启请求跨域
useCORS: true
// img 标签添加属性crossorigin

// 图片资源如果已经在浏览器中打开过，也会报错，需要添加时间戳

2. 服务端支持，图片资源要设置可跨域请求

Access-Control-Allow-Origin:  *

IOS 13.x 版本支持

问题描述：真机测试 ios 13.3/13.4 版本无法生成图片，查阅资料了解，是html2canvas 版本问题，需要回退到 1.0.0-rc.4 版本

npm install --save [email protected]

版本会退后还是无效 查看 package.json 中 html2canvas 包版本，发现为"html2canvas": "^1.0.0-rc.4", 去掉"^' 后执行npm i，问题解决