问题一:调用wx.canvasToTempFilePath 接口,图片过大,iOS端展示空白
解决方案:先尝试通过 setTimeout 之类的接口延迟调用 canvasToTempFilePath 的方式来规避,等待官方后续修复
Ex:
setTimeout(()=>{
this.transferCanvasToImage(canvas,type)
},1000)
//canvas转为图片
transferCanvasToImage(canvas) {
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
console.log(res.tempFilePath)
}
})
},
问题二:使用 wx.canvasToTempFilePath 将canvas转图片时,iPhone上图片分辨率过低
解决方案: wxml中根据图片动态设定canvas的宽高(不宜过大,过大还是会导致问题一),可使用 wx.getImageInfo 先获取图片宽高和手机的屏幕分辨率比例,再动态设置canvas的宽高
//wxml
<canvas id='canvasId' type="2d" style="width: {{width}};height: {{height}};"></canvas>
//js
wx.getImageInfo({
src: src, //网络图片,如果不行请换一个
success:(res)=> {
console.log(res)
// 获取屏幕分辨率比例,以适应 iOS 设备的缩放
const pixelRatio = wx.getSystemInfoSync().pixelRatio;
let width = res.width
let height = res.height
that.setData({
width:res.width / pixelRatio+'px', //图片过大,缩小宽高,可自行修改
height:res.width / pixelRatio+'px'
})
}
})