javascript - 關(guān)于canvas處理圖片的問題
問題描述
我需要將一張用戶上傳的圖片使用canvas進(jìn)行處理,用戶上傳的尺寸可能會(huì)很大,比如會(huì)超出當(dāng)前瀏覽器窗口的寬高,所以我將其等比縮放到瀏覽器可視區(qū)域內(nèi),然后繪制到canvas上,可是這樣我就相當(dāng)于把用戶的圖片縮小了,canvas處理完后,有辦法將其處理后的的圖片還原到原始尺寸,并且不會(huì)導(dǎo)致模糊的辦法嗎?
真是服了,下面誰給孤月和杰克點(diǎn)的踩?他們說的是對(duì)的方法??!問題解答
回答1:canvas的width和height都設(shè)置成和圖片原始大小一樣,但是使用style將canvas縮放在可視區(qū)域。這樣就不會(huì)對(duì)圖片進(jìn)行壓縮
回答2:感謝你的邀請(qǐng),雖然我很想回答你,但我沒試過,所以也不知道。當(dāng)然你可以自己去試試,反正花不了多少時(shí)間。不過我們可以換一種思維,為什么你要去縮小圖片然后繪制到canvas上?將圖片縮放到可視區(qū)域范圍內(nèi)不是一個(gè)max-width或者max-height不就搞定了嗎?這只是圖片表面上被縮小了,實(shí)際上的naturalWidth和naturalHeight是沒變的,所以縮放還原其實(shí)是多此一舉。 你展示在瀏覽器可視區(qū)域內(nèi)用img就可以,不要用canvas,canvas是用來處理圖片的。 如果你非得展示canvas正在處理中的圖片,那你另外創(chuàng)建一個(gè)離屏canvas就行,然后把相關(guān)的處理等比縮放弄上去就可以,最后保存離屏canvas就行。不知道我有沒有講清楚。
回答3:HTML5 之圖片上傳預(yù)處理https://juejin.im/entry/5933e...
相關(guān)文章:
1. javascript - 有什么比較好的網(wǎng)頁版shell前端組件?2. sql語句 - mysql中關(guān)聯(lián)表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?4. css - div外層有一圈白色5. javascript - [js]為什么畫布里不出現(xiàn)圖片呢?在線等6. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風(fēng)格檢查怎么辦。。。7. javascript - 如何將一個(gè)div始終固定在某個(gè)位置;無論屏幕和分辨率怎么變化;div位置始終不變8. html - vue項(xiàng)目中用到了elementUI問題9. javascript - iframe 為什么加載網(wǎng)頁的時(shí)候滾動(dòng)條這樣顯示?10. javascript - 求解答:實(shí)例對(duì)象調(diào)用constructor,此時(shí)constructor內(nèi)的this的指向?
