小編這次要給大家分享的是如何實現(xiàn)JS圖片壓縮，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網營銷推廣、網站重做改版、甘谷網站定制設計、自適應品牌網站建設、成都h5網站建設、商城網站制作、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為甘谷等各大城市提供網站開發(fā)制作服務。

前言

說起圖片壓縮，大家想到的或者平時用到的很多工具都可以實現(xiàn)，例如，客戶端類的有圖片壓縮工具 PPDuck3， JS 實現(xiàn)類的有插件 compression.js ，亦或是在線處理類的 OSS 上傳，文件上傳后，在訪問文件時中也有圖片的壓縮配置選項，不過，能不能自己擼一套 JS 實現(xiàn)的圖片壓縮代碼呢？當然可以，那我們先來理一下思路。

壓縮思路

涉及到 JS 的圖片壓縮，我的想法是需要用到 Canvas 的繪圖能力，通過調整圖片的分辨率或者繪圖質量來達到圖片壓縮的效果，實現(xiàn)思路如下：

• 獲取上傳 Input 中的圖片對象 File
• 將圖片轉換成 base64 格式
• base64 編碼的圖片通過 Canvas 轉換壓縮，這里會用到的 Canvas 的 drawImage 以及 toDataURL 這兩個 Api，一個調節(jié)圖片的分辨率的，一個是調節(jié)圖片壓縮質量并且輸出的，后續(xù)會有詳細介紹
• 轉換后的圖片生成對應的新圖片，然后輸出

優(yōu)缺點介紹

不過 Canvas 壓縮的方式也有著自己的優(yōu)缺點：

• 優(yōu)點：實現(xiàn)簡單，參數(shù)可以配置化，自定義圖片的尺寸，指定區(qū)域裁剪等等。
• 缺點：只有 jpeg 、webp 支持原圖尺寸下圖片質量的調整來達到壓縮圖片的效果，其他圖片格式，僅能通過調節(jié)尺寸來實現(xiàn)

代碼實現(xiàn)

網站標題：如何實現(xiàn)JS圖片壓縮-創(chuàng)新互聯(lián)
路徑分享：http://www.weahome.cn/article/ccdshd.html