应用场景
移动端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)
});
兼容处理
服务器图片资源，跨域处理
- 前端需要做的
// html2canvas配置开启请求跨域
useCORS: true
// img 标签添加属性crossorigin
<img crossorigin='anonymous' src="" />
// 图片资源如果已经在浏览器中打开过，也会报错，需要添加时间戳
<img crossorigin='anonymous' :src="`${url}?${new Date().getTime()}`" />
- 服务端支持，图片资源要设置可跨域请求
Access-Control-Allow-Origin: *
IOS 13.x 版本支持
问题描述：真机测试 ios 13.3/13.4 版本无法生成图片，查阅资料了解，是html2canvas 版本问题，需要回退到 1.0.0-rc.4 版本
npm install --save html2canvas@1.0.0-rc.4
版本会退后还是无效 查看 package.json 中 html2canvas 包版本，发现为"html2canvas": "^1.0.0-rc.4", 去掉"^' 后执行npm i，问题解决
