Vue使用mixins手寫壓縮圖片代碼

CoXie 發布于2019-08-22 15:23 / 2285人閱讀

摘要：一介紹本文將介紹再項目中通過對圖片進行壓縮后使用。把圖片能轉換成出發事件對賦值完成，觸發事件生成，調用回調函數。將圖片將轉成格式把轉換成文件四壓縮完成使用五參考鏈接壓縮圖片到以下

一、介紹

本文將介紹再Vue項目中通過js對圖片進行壓縮后使用。（純前端實現，不依賴后臺）

主要使用Canvas.toDataURL(type, encoderOptions)對圖片大小進行調整

參數	描述
type	圖片格式
encoderOptions	在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量。

二、步驟 1.將圖片轉化為 base64

使用 FileReader.readAsDataURL(file)：該方法會讀取指定的 File 對象。讀取操作完成的時候，readyState 會變成已完成（DONE），并觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。

reader.readAsDataURL 把圖片能轉換成 base64, 出發 reader.onload 事件對 image.src 賦值完成，觸發 image.onload 事件生成canvas，調用回調函數。

/**
 * 將圖片轉化為base64
 */
imgBase64(file, callback) {
  // 看支持不支持FileReader
  if (!file || !window.FileReader) return;
  // 創建一個 Image 對象
  let image = new Image();
  // 綁定 load 事件處理器，加載完成后執行
  image.onload = function () {
    // 創建 canvas DOM 對象
    let canvas = document.createElement("canvas");
    // 返回一個用于在畫布上繪圖的環境, "2d" 指定了您想要在畫布上繪制的類型
    let ctx = canvas.getContext("2d");
    // 如果高度超標 // 參數，最大高度
    let MAX_HEIGHT = 3000;
    if (image.height > MAX_HEIGHT) {
      // 寬度等比例縮放 *=
      image.width *= MAX_HEIGHT / image.height;
      image.height = MAX_HEIGHT;
    }
    // 獲取 canvas的 2d 環境對象,
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重置canvas寬高
    canvas.width = image.width;
    canvas.height = image.height;
    // 將圖像繪制到canvas上
    ctx.drawImage(image, 0, 0, image.width, image.height);

    callback(image, canvas);

  };
  if (/^image/.test(file.type)) {
    // 創建一個reader
    let reader = new FileReader();
    // 讀取成功后的回調
    reader.onload = function () {
      // 設置src屬性，瀏覽器會自動加載。
      // 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。
      image.src = this.result;
    };
    // 將圖片將轉成 base64 格式
    reader.readAsDataURL(file);
  }
}

2.把base64轉換成file文件

/**
 * 把base64轉換成file文件
 */
convertBase64UrlToFile(dataurl, filename) {
  let arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type: mime});
}

3.ES6 Promise的簡單使用

function checkAndHandleCompression() {
  //當異步代碼執行成功時，我們才會調用resolve(...), 當異步代碼失敗時就會調用reject(...)
  return new Promise((resolve, reject) => {
    resolve("成功!") // 代碼正常執行！
  })
}

checkAndHandleCompression().then((data)=>{
  console.log(data) // print 成功！
});

4.對 Promise 填充代碼，檢查并壓縮圖片大小

如果圖片過大就使用Canvas.toDataURL(type, encoderOptions)對圖片進行壓縮，并將結果異步返回

/**
 * 檢查并壓縮圖片大小
 */
checkAndHandleCompression(file) {

  return new Promise((resolve, reject) => {

    this.imgBase64(file, (image, canvas) => {
      let maxSize = 2 * 1024; // 壓縮到2M以下 (單位KB)
      let fileSize = file.size / 1024; // 圖片大小 (單位KB)

      let uploadSrc, uploadFile;
      // 如果圖片大小大于maxSize，進行壓縮
      if (fileSize > maxSize) {
        uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);
        uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 轉成file文件
      } else {
        uploadSrc = image.src;
        uploadFile = file;
      }

      let compressedSize = uploadFile.size / 1024;// 壓縮后圖片大小 (單位KB)
      // 判斷圖片大小是否小于maxSize，如果大于則繼續壓縮至小于為止
      if (compressedSize.toFixed(2) > maxSize) {
        this.checkAndHandleCompression(uploadFile);
      } else {
        let fileOptions = {uploadSrc, uploadFile};
        resolve(fileOptions);
      }
    });

  });

}

三、完整代碼

創建mixins/image-compress.js

export default {

  methods: {
    /**
     * 檢查并壓縮圖片大小
     */
    checkAndHandleCompression(file) {

      return new Promise((resolve, reject) => {

        this.imgBase64(file, (image, canvas) => {
          let maxSize = 2 * 1024; // 2M (單位KB)
          let fileSize = file.size / 1024; // 圖片大小 (單位KB)

          let uploadSrc, uploadFile;
          // 如果圖片大小大于maxSize，進行壓縮
          if (fileSize > maxSize) { 
            uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize); // 轉換成DataURL
            uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 轉成file文件
          } else {
            uploadSrc = image.src;
            uploadFile = file;
          }

          let compressedSize = uploadFile.size / 1024;// 壓縮后圖片大小 (單位KB)
          // 判斷圖片大小是否小于maxSize，如果大于則繼續壓縮至小于為止
          if (compressedSize.toFixed(2) > maxSize) {
            this.checkAndHandleUpload(uploadFile);
          } else {
            let fileOptions = {uploadSrc, uploadFile};
            resolve(fileOptions);
          }
        });

      });

    },

    /**
     * 將圖片轉化為base64
     */
    imgBase64(file, callback) {
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;
      // 創建一個 Image 對象
      let image = new Image();
      // 綁定 load 事件處理器，加載完成后執行
      image.onload = function () {
        // 創建 canvas DOM 對象
        let canvas = document.createElement("canvas");
        // 返回一個用于在畫布上繪圖的環境, "2d" 指定了您想要在畫布上繪制的類型
        let ctx = canvas.getContext("2d");
        // 如果高度超標 // 參數，最大高度
        let MAX_HEIGHT = 3000;
        if (image.height > MAX_HEIGHT) {
          // 寬度等比例縮放 *=
          image.width *= MAX_HEIGHT / image.height;
          image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環境對象,
        // 可以理解Context是管理員，canvas是房子
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas寬高
        canvas.width = image.width;
        canvas.height = image.height;
        // 將圖像繪制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);

        callback(image, canvas);

      };
      if (/^image/.test(file.type)) {
        // 創建一個reader
        let reader = new FileReader();
        // 讀取成功后的回調
        reader.onload = function () {
          // 設置src屬性，瀏覽器會自動加載。
          // 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。
          image.src = this.result;
        };
        // 將圖片將轉成 base64 格式
        reader.readAsDataURL(file);
      }
    },

    /**
     * 把Base64轉換成file文件
     */
    convertBase64UrlToFile(dataurl, filename) {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type: mime});
    }

  }
};

四、example

五、參考鏈接

js壓縮圖片到2m以下

MDN web docs FileReader.readAsDataURL()

MDN web docs Promise

GPU云服務器云服務器手寫代碼 vue使用webrtc vue 中使用 webrtc 圖片壓縮

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93426.html

小程序開發第二篇：使用微信小程序開發者工具、wepy框架初始化項目

摘要：上一篇小程序開發第一篇注冊獲取同步企業項目數據微信小程序開發者工具下載小程序開發者工具使用小程序原生開發直接使用小程序開發者工具打開項目即可小程序框架開發首選官方提供類開發框架，備選。上一篇：小程序開發第一篇：注冊、獲取unionid同步企業項目數據 1.微信小程序開發者工具下載：小程序開發者工具使用：小程序原生開發：直接使用小程序開發者工具打開項目即可小程序框架開發：...

HitenDev 2019-08-22 18:08 評論0 收藏0
制作html5微信頁面的經驗總結。

摘要：由于操作上比較多的設計都是隱性的例如滑動之類，需要手勢動畫作提示。如果頁面是推廣頁面，絕大部分用戶都是首次進入，而設計中的元素前端不能復現只能使用圖片時，會產生加載時間較長的問題。各手機尺寸，和比例。先羅列一下我遇到的問題：用戶可選擇圖片上傳，但是圖片比較大（基本都是2M以上），而且還得異步上傳。由于操作上比較多的設計都是隱性的例如滑動之類，需要手勢動畫作提示。塊內元素滾動...

ermaoL 2019-08-01 14:48 評論0 收藏0

發表評論

登陸后可評論

0條評論

CoXie

男|高級講師

我要關注我要私信

TA的文章

【C語言】scanf與回車的問題

閱讀 1402·2021-10-14 09:43
是，入坑小記

閱讀 992·2021-09-10 10:51
注冊阿里云免費領1年云服務器，2核2G內存1M帶寬40G系統盤

閱讀 1443·2021-09-01 10:42
css加載會造成阻塞嗎

閱讀 2189·2019-08-30 15:55
Vue基礎之初識Vue

閱讀 586·2019-08-30 15:55
關于Html+css階段學習總結

閱讀 2339·2019-08-30 14:21
兼容性總結

閱讀 1715·2019-08-30 13:04
PostCSS (一)：認識 PostCSS

閱讀 3467·2019-08-29 13:09

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Vue使用mixins手寫壓縮圖片代碼

相關文章

小程序開發第二篇：使用微信小程序開發者工具、wepy框架初始化項目

制作html5微信頁面的經驗總結。

發表評論

0條評論

CoXie

男|高級講師

TA的文章

【C語言】scanf與回車的問題

是，入坑小記

注冊阿里云免費領1年云服務器，2核2G內存1M帶寬40G系統盤

css加載會造成阻塞嗎

Vue基礎之初識Vue

關于Html+css階段學習總結

兼容性總結

PostCSS (一)：認識 PostCSS

最新活動