做微信小程序裁剪功能的時(shí)候,發(fā)現(xiàn)使用wx.canvasToTempFilePath的時(shí)候,一直裁剪出的是一張空白圖片荤懂。找了好久的原因燎潮,我以為是ctx.draw的沒成功就做了裁剪的原因蔑滓,然后我這樣做了
ctx.draw(false,wepy.canvasToTempFilePath({
canvasId: 'myCanvas',
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
fileType: this.imgtype,
success: (res) => {
wepy.hideLoading()
// 成功獲得地址的地方
console.log(res.tempFilePath)
wepy.setStorage({
key: 'tempFilePaths',
data: [res.tempFilePath],
success: () => {
wepy.navigateTo({
url: 'picture'
})
}
})
// wepy.previewImage({
// current: '', // 當(dāng)前顯示圖片的http鏈接
// urls: [res.tempFilePath] // 需要預(yù)覽的圖片http鏈接列表
// })
}
}))
在ctx.draw的回調(diào)函數(shù)里面執(zhí)行wx.canvasToTempFilePath灰嫉,稍微有了點(diǎn)希望拆宛,第一次是空白圖片第二次才正常,后來(lái)發(fā)現(xiàn)可以用定時(shí)器解決這個(gè)問題K先觥;牒瘛!
ctx.drawImage(this.imageSrc)
ctx.draw(false)
setTimeout(() => {
wepy.canvasToTempFilePath({
canvasId: 'myCanvas',
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
fileType: this.imgtype,
success: (res) => {
wepy.hideLoading()
// 成功獲得地址的地方
console.log(res.tempFilePath)
wepy.setStorage({
key: 'tempFilePaths',
data: [res.tempFilePath],
success: () => {
wepy.navigateTo({
url: 'picture'
})
}
})
// wepy.previewImage({
// current: '', // 當(dāng)前顯示圖片的http鏈接
// urls: [res.tempFilePath] // 需要預(yù)覽的圖片http鏈接列表
// })
}
})
}, 500)
成功解決8小G!