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

CoXie 發(fā)布于2019-08-22 15:23 / 2292人閱讀

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

一、介紹

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

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

參數(shù)	描述
type	圖片格式
encoderOptions	在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

二、步驟 1.將圖片轉(zhuǎn)化為 base64

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

reader.readAsDataURL 把圖片能轉(zhuǎn)換成 base64, 出發(fā) reader.onload 事件對 image.src 賦值完成，觸發(fā) image.onload 事件生成canvas，調(diào)用回調(diào)函數(shù)。

/**
 * 將圖片轉(zhuǎn)化為base64
 */
imgBase64(file, callback) {
  // 看支持不支持FileReader
  if (!file || !window.FileReader) return;
  // 創(chuàng)建一個 Image 對象
  let image = new Image();
  // 綁定 load 事件處理器，加載完成后執(zhí)行
  image.onload = function () {
    // 創(chuàng)建 canvas DOM 對象
    let canvas = document.createElement("canvas");
    // 返回一個用于在畫布上繪圖的環(huán)境, "2d" 指定了您想要在畫布上繪制的類型
    let ctx = canvas.getContext("2d");
    // 如果高度超標 // 參數(shù)，最大高度
    let MAX_HEIGHT = 3000;
    if (image.height > MAX_HEIGHT) {
      // 寬度等比例縮放 *=
      image.width *= MAX_HEIGHT / image.height;
      image.height = MAX_HEIGHT;
    }
    // 獲取 canvas的 2d 環(huán)境對象,
    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)) {
    // 創(chuàng)建一個reader
    let reader = new FileReader();
    // 讀取成功后的回調(diào)
    reader.onload = function () {
      // 設置src屬性，瀏覽器會自動加載。
      // 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。
      image.src = this.result;
    };
    // 將圖片將轉(zhuǎn)成 base64 格式
    reader.readAsDataURL(file);
  }
}

2.把base64轉(zhuǎn)換成file文件

/**
 * 把base64轉(zhuǎn)換成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() {
  //當異步代碼執(zhí)行成功時，我們才會調(diào)用resolve(...), 當異步代碼失敗時就會調(diào)用reject(...)
  return new Promise((resolve, reject) => {
    resolve("成功!") // 代碼正常執(zhí)行！
  })
}

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

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

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

/**
 * 檢查并壓縮圖片大小
 */
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); // 轉(zhuǎn)成file文件
      } else {
        uploadSrc = image.src;
        uploadFile = file;
      }

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

  });

}

三、完整代碼

創(chuàng)建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); // 轉(zhuǎn)換成DataURL
            uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 轉(zhuǎn)成file文件
          } else {
            uploadSrc = image.src;
            uploadFile = file;
          }

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

      });

    },

    /**
     * 將圖片轉(zhuǎn)化為base64
     */
    imgBase64(file, callback) {
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;
      // 創(chuàng)建一個 Image 對象
      let image = new Image();
      // 綁定 load 事件處理器，加載完成后執(zhí)行
      image.onload = function () {
        // 創(chuàng)建 canvas DOM 對象
        let canvas = document.createElement("canvas");
        // 返回一個用于在畫布上繪圖的環(huán)境, "2d" 指定了您想要在畫布上繪制的類型
        let ctx = canvas.getContext("2d");
        // 如果高度超標 // 參數(shù)，最大高度
        let MAX_HEIGHT = 3000;
        if (image.height > MAX_HEIGHT) {
          // 寬度等比例縮放 *=
          image.width *= MAX_HEIGHT / image.height;
          image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環(huán)境對象,
        // 可以理解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)) {
        // 創(chuàng)建一個reader
        let reader = new FileReader();
        // 讀取成功后的回調(diào)
        reader.onload = function () {
          // 設置src屬性，瀏覽器會自動加載。
          // 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。
          image.src = this.result;
        };
        // 將圖片將轉(zhuǎn)成 base64 格式
        reader.readAsDataURL(file);
      }
    },

    /**
     * 把Base64轉(zhuǎn)換成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 圖片壓縮

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93426.html

發(fā)表評論

登陸后可評論

0條評論

CoXie

男|高級講師

我要關(guān)注我要私信

TA的文章

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

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

閱讀 1003·2021-09-10 10:51
注冊阿里云免費領(lǐng)1年云服務器，2核2G內(nèi)存1M帶寬40G系統(tǒng)盤

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

閱讀 2199·2019-08-30 15:55
Vue基礎(chǔ)之初識Vue

閱讀 593·2019-08-30 15:55
關(guān)于Html+css階段學習總結(jié)

閱讀 2352·2019-08-30 14:21
兼容性總結(jié)

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

制作html5微信頁面的經(jīng)驗總結(jié)。

發(fā)表評論

0條評論

CoXie

男|高級講師

TA的文章

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

是，入坑小記

注冊阿里云免費領(lǐng)1年云服務器，2核2G內(nèi)存1M帶寬40G系統(tǒng)盤

css加載會造成阻塞嗎

Vue基礎(chǔ)之初識Vue

關(guān)于Html+css階段學習總結(jié)

兼容性總結(jié)

PostCSS (一)：認識 PostCSS

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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