問(wèn)題描述

我需要將一張用戶上傳的圖片使用canvas進(jìn)行處理，用戶上傳的尺寸可能會(huì)很大，比如會(huì)超出當(dāng)前瀏覽器窗口的寬高，所以我將其等比縮放到瀏覽器可視區(qū)域內(nèi)，然后繪制到canvas上，可是這樣我就相當(dāng)于把用戶的圖片縮小了，canvas處理完后，有辦法將其處理后的的圖片還原到原始尺寸，并且不會(huì)導(dǎo)致模糊的辦法嗎？

問(wèn)題解答

canvas的width和height都設(shè)置成和圖片原始大小一樣，但是使用style將canvas縮放在可視區(qū)域。這樣就不會(huì)對(duì)圖片進(jìn)行壓縮

感謝你的邀請(qǐng)，雖然我很想回答你，但我沒(méi)試過(guò)，所以也不知道。當(dāng)然你可以自己去試試，反正花不了多少時(shí)間。不過(guò)我們可以換一種思維，為什么你要去縮小圖片然后繪制到canvas上？將圖片縮放到可視區(qū)域范圍內(nèi)不是一個(gè)max-width或者max-height不就搞定了嗎？這只是圖片表面上被縮小了，實(shí)際上的naturalWidth和naturalHeight是沒(méi)變的，所以縮放還原其實(shí)是多此一舉。 你展示在瀏覽器可視區(qū)域內(nèi)用img就可以，不要用canvas，canvas是用來(lái)處理圖片的。 如果你非得展示canvas正在處理中的圖片，那你另外創(chuàng)建一個(gè)離屏canvas就行，然后把相關(guān)的處理等比縮放弄上去就可以，最后保存離屏canvas就行。不知道我有沒(méi)有講清楚。

HTML5 之圖片上傳預(yù)處理https://juejin.im/entry/5933e...