2. 程式人生 > 其它 >超好用的原生 JS + Canvas 進行圖片壓縮

超好用的原生 JS + Canvas 進行圖片壓縮

阿新 • • 發佈：2021-01-04

技術標籤：JavaScript

在這裡插入圖片描述

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input type="file" id="upload">
  <p id="p"></p>
  <script>
    const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg', 'image/webp']; // 限定圖片檔案型別
    const
 
 MAXSIZE = 1024 * 1024 * 3; // 限定圖片最大容量
    const MAXSIZE_STR = '3MB';
    function convertImageToBase64(file, cb) {
      let reader = new FileReader();
      reader.addEventListener('load', function (e) {
        const base64Image = e.target.result; // 獲取檔案內容，等同於 reader.result
        cb(base64Image);
        reader =
 
 null;
      });
      reader.readAsDataURL(file); // 讀取 file 物件中的內容
    }
    function compress(base64Image, cb) {
      let maxW = 1024;
      let maxH = 1024;

      const image = new Image();
      image.addEventListener('load', function () {
        let ratio; // 壓縮比
        let needCompress = false;
 
 // 是否需要壓縮
        if (maxW < image.naturalWidth) {
          needCompress = true;
          ratio = image.naturalWidth / maxW;
          maxH = image.naturalHeight / ratio;
        }
        if (maxH < image.naturalHeight) {
          needCompress = true;
          ratio = image.naturalHeight / maxH;
          maxW = image.naturalWidth / ratio;
        }
        if (!needCompress) {
          maxW = image.naturalWidth;
          maxH = image.naturalHeight;
        }
        const canvas = document.createElement('canvas');
        canvas.setAttribute('id', '__compress__');
        canvas.width = maxW;
        canvas.height = maxH;
        canvas.style.visibility = 'hidden';
        document.body.append(canvas);

        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, maxW, maxH);
        ctx.drawImage(image, 0, 0, maxW, maxH); // 渲染圖片
        const compressImage = canvas.toDataURL('image/jpeg', 0.9); // 壓縮圖片
        cb(compressImage);
        const _image = new Image();
        _image.src = compressImage;
        document.body.appendChild(_image);
        canvas.remove(); // 移除 canvas
        document.getElementById('p').innerHTML = `壓縮比 ${image.src.length / _image.src.length}`
      });
      image.src = base64Image; // 將圖片設定到 image 的 src 屬性中
      document.body.appendChild(image);
    }
    function uploadImage(compressImage) {
      console.log('upload image to server...', compressImage);
    }

    const upload = document.getElementById('upload');
    upload.addEventListener('change', function (e) {
      const file = e.target.files[0];
      console.log(file);
      if (!file) {
        return;
      }
      const { type: fileType, size: fileSize } = file;
      // 圖片型別檢查
      if (!ACCEPT.includes(fileType)) {
        alert('不支援上傳該格式檔案！');
        upload.value = '';
        return;
      }
      // 圖片大小檢查
      if (fileSize > MAXSIZE) {
        alert('檔案超出' + MAXSIZE_STR + '！');
        upload.value = '';
        return;
      }
      // 壓縮檔案
      convertImageToBase64(file, (base64Image) => compress(base64Image, uploadImage));
    });
  </script>
</body>

</html>

在這裡插入圖片描述

相關推薦

超好用的原生 JS + Canvas 進行圖片壓縮

技術標籤：JavaScript <!DOCTYPE html> <html> <head> </head> <body> <input type="file" id="upload">

用原生JS實現圖片懶載入

技術標籤：JSjavascript 之前專案都是使用現成的lazyLoad之類的懶載入外掛，趁專案沒那麼趕的時候自己試著實現一下。

超好用的圖片素材網站，趕緊收藏！

​我推薦幾個我覺得很不錯圖片網站給你吧！希望對你有幫助！更多幹貨內容可以到我主頁檢視哦！

分享一款超好用的JavaScript 打包壓縮工具

背景 平時大家在開發 Js 專案的時候，可能已經離不開 webpack 等打包工具了。而 webpack 打包速度大概就是“能用“的水平。大概去年開始，我就開始在構想，如果能寫一個極速的打包工具，功能未必需要很強，可能對小專

開源 5 款超好用的資料庫 GUI 帶你玩轉 MongoDB、Redis、SQL 資料庫

作者：HelloGitHub-*小魚乾 工欲善其事必先利其器，想要玩溜資料庫，不妨去試試本文安利的 5 款開源的資料庫管理工具。除了流行的 SQL 類資料庫——MySQL、PostgreSQL 之外，檔案型資料庫 MongoDB、記憶體資料庫 Re

開源 5 款超好用的資料庫 GUI 帶你玩轉 MongoDB、Redis、SQL 資料庫(推薦)

工欲善其事必先利其器，想要玩溜資料庫，不妨去試試本文安利的 5 款開源的資料庫管理工具。除了流行的 SQL 類資料庫——MySQL、PostgreSQL 之外，文件型資料庫 MongoDB、記憶體資料庫 Redis 的管理工具也在列表之中

Pycharm超好用外掛

Pycharm超好用外掛集合，編寫程式碼更高效 序: PyCharm外掛安裝 File—>Settings—>Plugins進行安裝外掛，然後只需要重新啟動IEDA即可。

原生js+canvas實現下雪效果

本文例項為大家分享了js+canvas實現下雪效果的具體程式碼，供大家參考，具體內容如下

原生js canvas實現滑鼠跟隨效果

本文例項為大家分享了canvas實現滑鼠跟隨效果的具體程式碼，供大家參考，具體內容如下

原生js+canvas實現貪吃蛇效果

本文例項為大家分享了canvas實現貪吃蛇效果的具體程式碼，供大家參考，具體內容如下

關於MyBatis10種超好用的寫法(收藏)

用來迴圈容器的標籤forEach,檢視例子 foreach元素的屬性主要有item，index，collection，open，separator，close。

5 款超好用的開源 Docker 工具

Docker 社群已經建立了許多開源工具，它們能幫我們處理各種用例。作者在本文中推薦了 5 款認為最有用的 Docker 工具，分別是 Watchtower（自動更新 Docker 容器）、docker-gc（容器和映象的垃圾回收）、docker-slim（

js+canvas實現圖片格式webp/png/jpeg線上轉換

功能需求： 我們在網頁中上傳一張圖片，選擇不同的格式，將該圖片轉換為對應的格式。

原生 js 實現選擇圖片後本地預覽

在web 程式設計裡有時候會需要這樣的功能，在 file 控制元件裡選擇圖片後需要實時預覽，而不用上傳到伺服器。可以用URL.createObjectURL()函式實現。

超好用的WIFI ADB除錯工具推薦

超好用的WIFI ADB除錯工具推薦 2020-1-26 10:253727 超好用的WIFI ADB除錯工具推薦

我逢人就吹的超好用Markdown編輯器-Typora

Typora 我不知道你是否喜歡寫文章，也不知道你是否有寫文章的需要，更不知道你是否使用Markdown來寫文章。

介面酷炫，功能強大！這款 Linux 效能實時監控工具超好用！

對於維護、管理Linux系統來說，它的效能監控非常重要，特別是實時監控資料，這個資料有利於我們判斷伺服器的負載壓力，及時調整資源調配，也有助於更好的服務於業務。所以，今天民工哥給大家安利一款 Linux 效能實時

超好用的會員VIP郵箱推薦，職場達人都在用的商務郵箱

VIP郵箱已成為當下新的潮流辦公方式，越來越多的職場人士希望通過會員服務來獲得更有利的安全及服務保障，同時達到提升辦公效率的終極目的。會員郵箱究竟好用在哪呢，下面分享一款超好用的會員郵箱！

CVX-超好用的Matlab建模軟體包（下載，安裝以及使用）

CVX是一個基於Matlab的凸優化建模系統。CVX將Matlab轉換為建模語言，允許使用標準Matlab表示式語法指定約束和目標。

今天我又帶來了一款超好用的百度網盤高速下載器~附軟體資源

前幾天看到後臺資料說之前的百度網盤高速下載分享連結錯誤或者登陸不了，這次我又帶來了一款超好用的下載加速器，啥也不說先上功能