html2canvas填坑指难
前端⽣成图⽚只有⼀种⽅法，就是⽤canvas画图，转成图⽚格式。
使⽤原⽣canvas画图，简单的实现画图还可以操作，如果是画海报，画⼆维码，就⽐较吃⼒，⼀般⽤现成的库来做。
画⼆维码有专门的⼆维码⽣成库 qrcode
把dom转成图⽚有专门库 html2canvas，⼀般前端⽣成海报都是⽤这个库
html2canvas 使⽤直接参考官⽹，使⽤⽐较简单
使⽤过程中我遇到的坑
1. 图⽚资源跨域问题
2. 滚动页⾯后，截图不完整
3. 图⽚有背景颜⾊
1.
图⽚跨域可以加
useCORS: true
经测试，就算加了允许跨域设置在⼀些苹果⼿机还是会出现截图为空⽩的情况，
需要把海报中的图⽚转成 base64 图⽚，在⽣成截图，就不会出现跨域问题了。
2.
页⾯滚动后，截图不完整
对于要⽣成分享的海报，在页⾯没有显⽰的。⼀般做法是把海报样式写好，隐藏在可视区域外，点击⽣成海报，然后截图
.outview{
position: fixed;/*设置成 absolute 有遇到截图空⽩问题，建议设置成 fixed*/
top: 0;/* 需要设置不然出现滚动截图不完整*/
left: -9999px;
}
注意，设置fixed定位需要设置 scrollX，scrollY
html2canvas(node,{
useCORS:true,// 处理图⽚跨域问题
scrollX:0,// 有fixed定位需要加，
scrollY:0,// 有fixed定位需要加，
backgroundColor:'transpant'// 设置截图背景透明
})
scrollX Element scrollX The x-scroll position to used when rendering element, (for example if the Element uses position: fixed) scrollY Element scrollY The y-scroll position to used when rendering element, (for example if the Element uses position: fixed)
3.
设计给的海报有圆⾓，⽣成海报图⽚后，圆⾓有⽩⾊背景，设置 backgroundColor: 'transparent' 可以解决
⽰例代码是在vue项⽬中使⽤的，如果需要在其他地⽅使⽤需要⾃⾏修改。
完整代码:
const handlePoster ={
data(){
return{
cover:'',// 海报封⾯图
posterSrc:'',// ⽣成的海报
}
},
methods:{
createImage(){
this.$vux.loading.show({
text:'⽣成海报中'
})
ver.indexOf('data:image')>-1){
this.dom2canvas()
return
}
// 处理图⽚跨域问题，把图⽚转成base64
let imageEl =new Image()
/
/ 防⽌读取本地（浏览器）缓存，本地图⽚有跨域问题
imageEl.src =this.detailsInfo.image +'?v'+ Math.random()
let base64 =getBase64Image(imageEl)
this.$nextTick(()=>{
this.dom2canvas()
})
}
this.$vux.loading.hide()
this.$('⽣成海报失败请重试')
}
},
dom2canvas(){
html2canvas(this.$refs.boxPoster.$el,{
logging:true,
useCORS:true,
scrollY:0,// 页⾯滚动后截图不完整，需要设置
scrollX:0,
backgroundColor:'transparent',// 背景图⽚有默认颜⾊，需要设置}).then((canvas)=>{
this.posterSrc = DataURL()
this.$vux.loading.hide()
})
},
}
}
// 定义⼀个使⽤混⼊对象的组件
html如何设置图片滚动var Component = d({
mixins:[myMixin]
})
var component =new Component()// 在组件中使⽤
// 不推荐全局混⼊
/
/ Vue.mixin(handlePoster)
截图不完整问题可参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。