前几天开发h5端dom节点生成海报，用了比较大众化的html2canvas插件，结果测试说ios不显示还有的苹果手机只截取了一半图另外部分是空白 于是就开启漫长的调试，修复bug之旅·· 经过多轮测试最终一下代码搞定了，完美兼容ios，安卓 顺带手修复了生成的图片模糊锯齿问题 下面是使用方式
//html部分
<div id="reportPoster" >
-------------------要生成海报内容的dom节点----------
</div>
<img :src="imageUrl" />
<button type="primary" @click="exportPoster" class="btn-box-left">生成海报</button>
//**1.导入html2canvas.js文件**
import * as html2canvas from '@/base/html2canvas2'
// 最新海报兼容问题
data(){
return{
imageUrl:null,
}
}
exportPoster(){
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
const shareContent = document.getElementById('reportPoster')
var width = shareContent.offsetWidth; //生成海报dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
const scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// allowTaint: true, //允许画布上有跨域图片 不建议使用 后面详细补充
logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width-1, //dom 原始宽度
height: height-1,
dpi:300,
useCORS: true // [重要]开启跨域配置
};
setTimeout(()=>{
html2canvas(shareContent,opts).then(function (canvas) {
var x = canvas.toDataURL('image/jpeg')
that.imageUrl = x
}).catch((err) => {
})
},500)
}
