搜尋

首頁  >  問答  >  主體

javascript - 關於canvas處理圖片的問題

我需要將一張使用者上傳的圖片使用canvas進行處理,使用者上傳的尺寸可能會很大,例如會超出目前瀏覽器視窗的寬高,所以我將其等比縮放到瀏覽器視覺區域內,然後繪製到canvas上,可是這樣我就相當於把用戶的圖片縮小了,canvas處理完後,有辦法將其處理後的圖片還原到原始尺寸,並且不會導致模糊的辦法嗎?

真是服了,下面誰給孤月和傑克點的踩?他們說的是對的方法啊!

扔个三星炸死你扔个三星炸死你2751 天前1010

全部回覆(3)我來回復

  • ringa_lee

    ringa_lee2017-06-10 09:51:16

    canvas的width和height都設定成和圖片原始大小一樣,但使用style將canvas縮放在視覺區域。這樣就不會壓縮圖片

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-06-10 09:51:16

    感謝你的邀請,雖然我很想回答你,但我沒試過,所以也不知道。當然你可以自己去試試,反正花不了多少時間。
    不過我們可以換個思維,為什麼要去縮小圖片然後繪製到canvas上?
    將圖片縮放到可視區域範圍內不是一個max-width或max-height不就搞定了嗎?這只是圖片表面上被縮小了,實際上的naturalWidth和naturalHeight是沒變的,所以縮放還原其實是多此一舉。
    你展示在瀏覽器視覺區域內用img就可以,不要用canvas,canvas是用來處理圖片的。 如果你非得展示canvas正在處理中的圖片,那你另外創建一個離屏canvas就行,然後把相關的處理等比縮放弄上去就可以,最後保存離屏canvas就行。
    不知道我有沒有講清楚。

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-10 09:51:16

    HTML5 圖片上傳預處理https://juejin.im/entry/5933e...

    回覆
    0
  • 取消回覆