文章詳情頁
javascript - 關于canvas處理圖片的問題
瀏覽:184日期:2022-11-21 13:09:57
問題描述
我需要將一張用戶上傳的圖片使用canvas進行處理,用戶上傳的尺寸可能會很大,比如會超出當前瀏覽器窗口的寬高,所以我將其等比縮放到瀏覽器可視區域內,然后繪制到canvas上,可是這樣我就相當于把用戶的圖片縮小了,canvas處理完后,有辦法將其處理后的的圖片還原到原始尺寸,并且不會導致模糊的辦法嗎?
真是服了,下面誰給孤月和杰克點的踩?他們說的是對的方法啊!問題解答
回答1:canvas的width和height都設置成和圖片原始大小一樣,但是使用style將canvas縮放在可視區域。這樣就不會對圖片進行壓縮
回答2:感謝你的邀請,雖然我很想回答你,但我沒試過,所以也不知道。當然你可以自己去試試,反正花不了多少時間。不過我們可以換一種思維,為什么你要去縮小圖片然后繪制到canvas上?將圖片縮放到可視區域范圍內不是一個max-width或者max-height不就搞定了嗎?這只是圖片表面上被縮小了,實際上的naturalWidth和naturalHeight是沒變的,所以縮放還原其實是多此一舉。 你展示在瀏覽器可視區域內用img就可以,不要用canvas,canvas是用來處理圖片的。 如果你非得展示canvas正在處理中的圖片,那你另外創建一個離屏canvas就行,然后把相關的處理等比縮放弄上去就可以,最后保存離屏canvas就行。不知道我有沒有講清楚。
回答3:HTML5 之圖片上傳預處理https://juejin.im/entry/5933e...
標簽:
JavaScript
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化5. javascript - nodejs關于進程間發送句柄的一點疑問6. 配置Apache時,添加對PHP的支持時語法錯誤7. phpstudy8.1支持win11系統嗎?8. javascript - vue-router 地址改變數據未改變9. 實現bing搜索工具urlAPI提交10. javascript - 移動端上不能實現拖拽布局嗎?
排行榜

網公網安備