微信小程序圖片裁剪使用canvas的坑

做微信小程序裁剪功能的時候,發(fā)現(xiàn)使用wx.canvasToTempFilePath的時候,一直裁剪出的是一張空白圖片。找了好久的原因,我以為是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: '', // 當前顯示圖片的http鏈接
              //   urls: [res.tempFilePath] // 需要預覽的圖片http鏈接列表
              // })
            }
          }))

在ctx.draw的回調(diào)函數(shù)里面執(zhí)行wx.canvasToTempFilePath,稍微有了點希望,第一次是空白圖片第二次才正常,后來發(fā)現(xiàn)可以用定時器解決這個問題!??!

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: '', // 當前顯示圖片的http鏈接
        //   urls: [res.tempFilePath] // 需要預覽的圖片http鏈接列表
        // })
    }
    })
}, 500)

成功解決?。?!

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容