⼩程序canvas⽣成图⽚压缩和失真问题draw失效问题汇总canvas⽣成图⽚失真问题
canvas⽣成图⽚的过程
1. 把⽹络图⽚保存到⼩程序的缓存中，并获取到图⽚的信息⽤getImageInfo
2. 在canvas上绘制想要的图⽚，⽤canvas各种⽅法
3. 使⽤canvasToTempFilePath或者saveImageToPhotosAlbum保存图⽚
分析决定图⽚质量， 图⽚失真的原因在第三部，使⽤canvasToTempFilePath保存的时候。
⽰例代码
saveImageCanvas(){
wx.showLoading({
title:'正在保存',
})
let bgImageObj =this.data.bgImageObj;
wx.canvasToTempFilePath({
x:0,
y:0,
width:300,
height:500,
destWidth: bgImageObj.width,// 决定了保存图⽚的清晰程度
destHeight: bgImageObj.height,// 决定了保存图⽚的清晰程度
canvasId:'share',
success(res){
console.pFilePath);
wx.saveImageToPhotosAlbum({
filePath: pFilePath,
success(res){
wx.hideLoading()
wx.showToast({
title:'图⽚保存成功',
})
console.log("保存成功")}
})
},
fail(){
console.log("shibai");
wx.hideLoading()
wx.showToast({
title:'图⽚保存失败，请稍后再试',
icon:'none'svg和canvas的区别
})
},
complete(){
console.log("完成")
}
})
}
canvasToTempFilePath的destWidth, destHeight决定了图⽚的清晰度和像素。只要按⽐例放⼤这个数值，图⽚质量也会提⾼。在ios中draw失效问题
⽰例代码
cxt_arc.draw(false,function(e){
console.log('draw callback')
})
问题分析
canvas.draw 绘图结束后的回调再IOS上不执⾏，安卓⼿机未见此问题。
原因为：页⾯上设置了 wx:if hidden，本想在绘图结束后再显⽰，不过再IOS11上不⾏。
解决办法：去掉hidden / wx:if 或者再draw之前显⽰页⾯，总之页⾯不显⽰没办法在IOS上执⾏draw的回调函数

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