文章詳情頁
javascript - 關于canvas處理圖片的問題
瀏覽：81日期：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. 網頁爬蟲 - python爬蟲翻頁問題，請問各位大神我這段代碼怎樣翻頁，還有價格要登陸后才能看到，應該怎么解決2. python如何不改動文件的情況下修改文件的 修改日期3. 算法 - python 給定一個正整數a和一個包含任意個正整數的 列表 b，求所有<=a 的加法組合4. python - thrift 返回 TSocket read 0 bytes 求助!!!!5. javascript - 微信h5發送圖文信息，部分設備點擊“發送”按鈕時沒反應，問題較難重現，如何能找到可能存在問題的點？6. javascript - 微信小程序里怎么把頁面轉成圖片分享7. python 正則表達式提取8. python - 求一個在def中可以實現調用本def滿足特定條件continue效果的方法（標題說不太清楚，請見題內描述）9. javascript - JS用ajax爬取百度外賣店家信息10. python - Pycharm調試代碼進行列表遍歷時，如何直接賦值指定元素
排行榜
網公網安備