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

做微信小程序裁剪功能的時(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!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末炎滞,一起剝皮案震驚了整個(gè)濱河市敢艰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌厂榛,老刑警劉巖盖矫,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異击奶,居然都是意外死亡辈双,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門柜砾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)湃望,“玉大人,你說(shuō)我怎么就攤上這事痰驱≈ぐ牛” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵担映,是天一觀的道長(zhǎng)废士。 經(jīng)常有香客問我,道長(zhǎng)蝇完,這世上最難降的妖魔是什么官硝? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮短蜕,結(jié)果婚禮上氢架,老公的妹妹穿的比我還像新娘。我一直安慰自己朋魔,他們只是感情好岖研,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著警检,像睡著了一般孙援。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扇雕,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天赃磨,我揣著相機(jī)與錄音,去河邊找鬼洼裤。 笑死邻辉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的腮鞍。 我是一名探鬼主播值骇,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼移国!你這毒婦竟也來(lái)了吱瘩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤迹缀,失蹤者是張志新(化名)和其女友劉穎使碾,沒想到半個(gè)月后蜜徽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡票摇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年拘鞋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矢门。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡盆色,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出祟剔,到底是詐尸還是另有隱情隔躲,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布物延,位于F島的核電站宣旱,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏叛薯。R本人自食惡果不足惜响鹃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望案训。 院中可真熱鬧买置,春花似錦、人聲如沸强霎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)城舞。三九已至轩触,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間家夺,已是汗流浹背脱柱。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拉馋,地道東北人榨为。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像煌茴,于是被迫代替她去往敵國(guó)和親随闺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 給提問的開發(fā)者的建議:提問之前先查詢 文檔蔓腐、通過社區(qū)右上角搜索搜索已經(jīng)存在的問題矩乐。 寫一個(gè)簡(jiǎn)明扼要的標(biāo)題,并且...
    極樂叔閱讀 13,460評(píng)論 0 3
  • 小程序是什么回论? 騰訊微信端的類原生app開發(fā)散罕,用一堆騰訊寫的組件和自己造一些組件分歇,進(jìn)行app開發(fā)吧。 第一個(gè)小程序...
    Komolei閱讀 1,791評(píng)論 0 0
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果欧漱,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜职抡,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,514評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果硫椰,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌萨蚕。在這里你可以看...
    F麥子閱讀 5,115評(píng)論 5 13
  • 本文原文鏈接:http://classlfz.com/2017/07/23/write-an-image-scis...
    classlfz閱讀 9,022評(píng)論 0 5