国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

如何使用js對(duì)圖像進(jìn)行壓縮

2年前作者：憂郁的蛋~分類：Toy博客閱讀(15)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了如何使用js對(duì)圖像進(jìn)行壓縮。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

JavaScript 可以使用類似于 canvas 和 web workers 來實(shí)現(xiàn)圖像壓縮。

使用 canvas，可以將圖像繪制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉(zhuǎn)換為不同格式的圖像。在這些方法中指定圖像質(zhì)量參數(shù)即可實(shí)現(xiàn)壓縮。

使用 web workers，可以在后臺(tái)執(zhí)行圖像壓縮，以避免阻塞 UI 線程。

但是在瀏覽器環(huán)境下，JavaScript 因?yàn)榘踩拗?，不能操作本地文件，所以一般使用在瀏覽器端上傳圖片，使用 JavaScript 進(jìn)行壓縮處理，上傳到服務(wù)端，后續(xù)處理。

一、簡(jiǎn)單壓縮

使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式。Data URL 是一種將數(shù)據(jù)嵌入 URL 的格式，可以在不需要網(wǎng)絡(luò)請(qǐng)求的情況下直接在瀏覽器中加載圖像。

在調(diào)用 toDataURL() 方法時(shí)，可以使用第二個(gè)參數(shù)來指定圖像質(zhì)量。該參數(shù)的值應(yīng)該在 0 到 1 之間，表示圖像質(zhì)量的百分比。0 表示最低質(zhì)量，1 表示最高質(zhì)量。

這是一個(gè)使用 canvas 和 JavaScript 壓縮圖像的示例代碼：

// 創(chuàng)建 Image 對(duì)象
var img = new Image();
img.src = "image.jpg";
img.onload = function () {
  var _this = this;
  // 獲取 canvas 元素
  var canvas = document.getElementById("canvas");
  // 繪制圖像到 canvas
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(_this, 0, 0, img.width, img.height);
  // 使用 toDataURL 方法壓縮圖像
  var dataUrl = canvas.toDataURL("image/jpeg", 0.5);
  // 使用新的 Data URL 更新圖像
};

這個(gè)例子中，圖片會(huì)使用 jpeg 格式壓縮，質(zhì)量為 50%，壓縮后的圖片會(huì)被重新賦值回 img.src 里，可以改變其他參數(shù)得到不同的壓縮效果

二、使用 canvas 將 base64 圖像壓縮到指定文件大小以內(nèi)

1、 方法一

1.1、通過循環(huán)遍歷由大到小的圖像質(zhì)量系數(shù)來確定合適的系數(shù)

首先使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，并使用 base64ToBlob() 方法將 base64 圖像轉(zhuǎn)換為 Blob 對(duì)象。

再檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過，使用不同的圖像質(zhì)量再次壓縮圖像，直到它的大小小于給定的最大大小為止。

下面是一個(gè)示例代碼：

var maxSize = 100 * 1024; // 最大文件大小為100KB
var img = new Image();
img.src = "base64 or path";
img.onload = function () {
  const _this = this;
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var width = img.width;
  var height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(_this, 0, 0, width, height);
  var quality = 0.8;
  let newBase64Image, resultBlob;
  do {
    newBase64Image = canvas.toDataURL("image/jpeg", quality);
    resultBlob = base64ToBlob(newBase64Image);
    quality -= 0.1;
  } while (resultBlob.size > maxSize && quality > 0.1);
};

// 將base64 轉(zhuǎn)換為Blob
function base64ToBlob(base64) {
  var arr = base64.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 Blob([u8arr], {
    type: mime,
  });
}

這個(gè)示例代碼使用 canvas 將 base64 圖像壓縮到指定的最大文件大小以內(nèi)。它使用了一個(gè) do-while 循環(huán)來不斷地減小圖像質(zhì)量直到圖像的文件大小符合限制為止。最后它生成了一個(gè) resultBlob 對(duì)象，它可以被用來更新頁面上的圖像或者存儲(chǔ)到服務(wù)器上。

值得注意的是，這個(gè)示例代碼中進(jìn)行圖像壓縮時(shí)的質(zhì)量是每次減少 0.1，如果壓縮后的圖像的文件大小仍然超出限制，可能需要調(diào)整這個(gè)減少量，或者考慮其他壓縮策略，比如更改圖像的分辨率等。在這個(gè)例子中壓縮文件大小是每次只減少 0.1，這樣可能會(huì)花費(fèi)很長時(shí)間，在實(shí)際應(yīng)用中需要根據(jù)需求來進(jìn)行調(diào)整。

1.2、通過二分查找算法更快速確定合適的圖像質(zhì)量系數(shù)
var maxSize = 100 * 1024; // 最大文件大小為100KB
var img = new Image();
img.src = "base64 or path";
img.onload = function () {
  const _this = this;
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var width = img.width;
  var height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(_this, 0, 0, width, height);
  var quality = 0.8;
  let newBase64Image = canvas.toDataURL("image/jpeg", quality);
  let fileSize = getBase64ImageSize(newBase64Image);
  if (fileSize > maxSize) {
    const qualityArr = [],
      step = 0.01;
    for (let i = step; i <= quality; i += step) {
      // qualityArr.push(parseFloat(i.toFixed(2)));
      qualityArr.push(parseFloat(i));
    }
    let left = 0,
      right = qualityArr.length - 1;
    do {
      const mid = Math.floor((left + right) / 2);
      newBase64Image = canvas.toDataURL("image/jpeg", qualityArr[mid]);
      fileSize = getBase64ImageSize(newBase64Image);
      if (fileSize > maxSize) {
        right = mid - 1;
      } else {
        left = mid + 1;
      }
    } while (left <= right);
  }
};

// 計(jì)算base64編碼圖片大小
function getBase64ImageSize(base64) {
  const indexBase64 = base64.indexOf("base64,");
  if (indexBase64 < 0) return -1;
  const str = base64.substr(indexBase64 + 6);
  // 大小單位：字節(jié)
  return (str.length * 0.75).toFixed(2);
}

該方法由 ?@Wuya 提出的建議進(jìn)行改進(jìn)。

2.、方法二：遞歸代替迭代(do-while 循環(huán))

遞歸方式可避免迭代導(dǎo)致壓縮處理過程中，頁面提示組件無法顯示的問題

2.1、遞歸遍歷遞減圖像質(zhì)量系數(shù)確定合適的系數(shù)
// 計(jì)算base64編碼圖片大小
function getBase64ImageSize(base64) {
  const indexBase64 = base64.indexOf("base64,");
  if (indexBase64 < 0) return -1;
  const str = base64.substr(indexBase64 + 6);
  // 大小單位：字節(jié)
  return (str.length * 0.75).toFixed(2);
}

/**
 * 	圖像壓縮，默認(rèn)同比例壓縮
 * @param {Object} imgPath
 *	圖像base64編碼字符串或圖像可訪問路徑
 * @param {Object} obj
 *	obj 對(duì)象 有 width， height， quality(0-1)
 * @param {Object} maxSize
 *	指定壓縮后的文件大小，單位：字節(jié)
 * @param {Object} callback
 *	回調(diào)函數(shù)有一個(gè)參數(shù)，base64的字符串?dāng)?shù)據(jù)
 */
function compressedImage(path, obj, maxSize, callback) {
  let img = new Image();
  img.src = imgPath;
  img.onload = function () {
    const _this = this;
    // 默認(rèn)按比例壓縮
    let w = _this.width,
      h = _this.height,
      scale = w / h;
    w = obj.width || w;
    h = (obj.height && obj.height * (w / scale)) || h;
    // 生成canvas
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(_this, 0, 0, w, h);
    // 圖像質(zhì)量，默認(rèn)圖片質(zhì)量為0.8
    let quality = 0.8;
    if (obj.quality && obj.quality > 0 && obj.quality <= 1) {
      quality = obj.quality;
    }
    // quality值越小，所繪制出的圖像越模糊
    let newBase64Image = canvas.toDataURL("image/jpeg", quality);
    let fileSize = getBase64ImageSize(newBase64Image);
    if (fileSize > maxSize && quality > 0.01) {
      if (quality > 0.05) {
        quality = quality - 0.05;
      } else {
        quality = 0.01;
      }
      compressedImage(
        imgPath,
        {
          quality: quality,
        },
        maxSize,
        callback
      );
      return;
    }
    if (!!callback) {
      // 回調(diào)函數(shù)返回壓縮后的 base64 圖像
      callback(newBase64Image);
    }
  };
}
2.2、遞歸二分查找確定圖像質(zhì)量系數(shù)（由 2.1 進(jìn)行改進(jìn)），并增加寬高壓縮率（最終完整版，推薦）
// 計(jì)算 base64 編碼圖片大小
function getBase64ImageSize(base64) {
  const indexBase64 = base64.indexOf("base64,");
  if (indexBase64 < 0) return -1;
  const str = base64.substr(indexBase64 + 6);
  // 大小單位：字節(jié)
  return (str.length * 0.75).toFixed(2);
}

/**
 * 	圖像壓縮，默認(rèn)同比例壓縮
 * @param {Object} imgPath
 *	圖像 base64 編碼字符串或圖像可訪問路徑
 * @param {Object} compParamObj
 *	壓縮參數(shù)，compParamObj 對(duì)象的屬性：width-寬，height-高，
 *  ratio(0-1)-寬高壓縮率，quality(0-1)-圖像質(zhì)量系數(shù)
 * @param {Object} maxSize
 *	指定壓縮后的文件大小，單位：字節(jié)
 * @param {Object} callback
 *	回調(diào)函數(shù)有一個(gè)參數(shù)，base64 的字符串?dāng)?shù)據(jù)
 * @param {Object} left
 *	二分遞歸查找 left
 * @param {Object} right
 *	二分遞歸查找 right
 * @param {Object} oQuality
 *	初始圖像質(zhì)量系數(shù)
 */
function compressedImage(
  imgPath,
  compParamObj,
  maxSize,
  callback,
  left = 0,
  right = null,
  oQuality = null
) {
  let img = new Image();
  img.src = imgPath;
  img.onload = function () {
    const _this = this;
    // 默認(rèn)按比例壓縮
    let w = _this.width * (compParamObj?.ratio || 1),
      h = _this.height * (compParamObj?.ratio || 1),
      scale = w / h;
    w = compParamObj.width || w;
    h = (compParamObj.height && compParamObj.height * (w / scale)) || h;
    // 生成 canvas
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(_this, 0, 0, w, h);
    // 圖像質(zhì)量系數(shù)，默認(rèn)圖片質(zhì)量為 0.8
    let quality = 0.8;
    if (
      compParamObj.quality &&
      compParamObj.quality > 0 &&
      compParamObj.quality <= 1
    ) {
      quality = compParamObj.quality;
    }
    // quality 值越小，所繪制出的圖像越模糊
    let newBase64Image = canvas.toDataURL("image/jpeg", quality);
    let fileSize = getBase64ImageSize(newBase64Image);

    if (left <= right) {
      if (oQuality === null) {
        oQuality = quality;
      }

      const qualityArr = [],
        step = 0.01;
      for (let i = step; i <= oQuality; i += step) {
        qualityArr.push(parseFloat(i));
      }

      if (right === null) {
        right = qualityArr.length;
      }

      const mid = Math.floor((left + right) / 2);

      if (fileSize > maxSize) {
        compressedImage(
          imgPath,
          {
            quality: qualityArr[mid],
            // 設(shè)置寬高壓縮率對(duì)圖像進(jìn)行寬高壓縮，降低圖像被壓縮后出現(xiàn)彩虹斑的情況
            ratio: 0.5,
          },
          maxSize,
          callback,
          left,
          mid - 1,
          oQuality
        );
      } else {
        compressedImage(
          imgPath,
          {
            quality: qualityArr[mid],
            // 設(shè)置寬高壓縮率對(duì)圖像進(jìn)行寬高壓縮，降低圖像被壓縮后出現(xiàn)彩虹斑的情況
            ratio: 0.5,
          },
          maxSize,
          callback,
          mid + 1,
          right,
          oQuality
        );
      }
      return;
    }
    if (!!callback) {
      // 回調(diào)函數(shù)返回壓縮后的 base64 圖像
      callback(newBase64Image);
    }
  };
}

上述代碼中，當(dāng)只通過圖像質(zhì)量系數(shù) oQuality 對(duì)圖像進(jìn)行壓縮時(shí)，圖像文件越大，被壓縮后出現(xiàn)的彩虹斑的概率越高，因此，為降低圖像被壓縮后出現(xiàn)彩虹斑的情況，同時(shí)設(shè)置寬高壓縮率對(duì)圖像寬高進(jìn)行壓縮。

三、使用 canvas 和 web workers 來實(shí)現(xiàn)圖像壓縮

JavaScript 的 Web Workers API 允許在瀏覽器中創(chuàng)建多個(gè)線程，可以在后臺(tái)線程中執(zhí)行 JavaScript 代碼，而不會(huì)影響主線程的響應(yīng)性。因此，可以使用 Web Workers 來執(zhí)行計(jì)算密集型任務(wù)，例如圖像壓縮。

下面是一個(gè)簡(jiǎn)單的示例代碼，展示了如何使用 Web Workers 在后臺(tái)線程中執(zhí)行圖像壓縮：

// 在主線程中
var worker = new Worker("worker.js");
worker.onmessage = function (e) {
  var compressedImage = e.data;
  // do something with compressedImage
};
worker.postMessage({
  image: base64Image,
  maxSize: 100 * 1024, // 最大文件大小為100KB
});

// worker.js
self.onmessage = function (e) {
  var image = e.data.image;
  var maxSize = e.data.maxSize;
  var img = new Image();
  img.src = image;
  img.onload = function () {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var width = img.width;
    var height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    var quality = 0.8;
    let newBase64Image, resultBlob;
    do {
      // 該方法是異步獲取 Blob 的，導(dǎo)致無法及時(shí)獲取 resultBlob.size
      // canvas.toBlob(function (blob) {
      //     resultBlob = blob;
      //     self.postMessage(resultBlob);
      // }, 'image/jpeg', quality);

      newBase64Image = canvas.toDataURL("image/jpeg", quality);
      resultBlob = base64ToBlob(newBase64Image);
      self.postMessage(resultBlob);
      quality -= 0.1;
    } while (resultBlob.size > maxSize && quality > 0.1);
  };
};

// 將 base64 轉(zhuǎn)換為 Blob
function base64ToBlob(base64) {
  var arr = base64.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 Blob([u8arr], {
    type: mime,
  });
}

這個(gè)示例代碼中，在主線程中通過創(chuàng)建一個(gè) Worker 對(duì)象并加載一個(gè) worker.js 文件來啟動(dòng)一個(gè)后臺(tái)線程. 在 worker.js 中，我們?cè)?onmessage 中定義了圖像壓縮的邏輯，并使用 postMessage 來將壓縮后的圖像發(fā)送回主線程。這樣做的優(yōu)點(diǎn)在于，將圖像壓縮的計(jì)算密集型任務(wù)放到了后臺(tái)線程中進(jìn)行，可以保證主線程的響應(yīng)性不會(huì)受到影響。這樣能夠避免因?yàn)橛?jì)算密集型任務(wù)而導(dǎo)致頁面卡頓或延遲。

需要注意的是，Web Workers 不能直接訪問 DOM，所以需要使用 postMessage 在主線程和后臺(tái)線程之間傳遞數(shù)據(jù)。

這只是一個(gè)簡(jiǎn)單的示例，實(shí)際應(yīng)用中可能需要根據(jù)需求進(jìn)行更多的定制。

四、使用第三方庫進(jìn)行圖像壓縮

在 JavaScript 中進(jìn)行圖像壓縮有一些第三方庫可供使用，比如：

  • canvas-toBlob.js：在不支持 toBlob() 的瀏覽器中提供對(duì) toBlob() 的支持。
  • lwip：一個(gè) JavaScript 的圖像處理庫，可以實(shí)現(xiàn)圖像的壓縮，旋轉(zhuǎn)，裁剪等操作，可在 Node.js 環(huán)境中使用。
  • browser-image-resizer：基于 canvas 和 web workers 的 JavaScript 圖像壓縮庫。
  • jpeg-js：使用 JavaScript 實(shí)現(xiàn)的 JPEG 壓縮庫，可以在瀏覽器或 Node.js 環(huán)境中使用。

使用這些庫進(jìn)行壓縮時(shí)需要注意的是，它們?cè)谛阅苌峡赡苡兴拗?。?duì)于大型圖像，壓縮可能需要相當(dāng)長的時(shí)間?？赡苄枰谟脩羯蟼鲌D像時(shí)顯示加載條或消息，以提醒用戶正在進(jìn)行壓縮。

五、使用 Canvas 進(jìn)行圖像壓縮時(shí)，出現(xiàn)彩虹斑問題

在使用 Canvas 進(jìn)行圖像壓縮時(shí)，可能會(huì)出現(xiàn)彩虹斑問題，這通常是由于壓縮算法中使用了量化方法而導(dǎo)致的，量化會(huì)使顏色變得不連續(xù)，從而產(chǎn)生彩虹斑。

以下是一些可以嘗試的解決方法：

  • 調(diào)整圖像寬高，嘗試對(duì)圖像的寬高進(jìn)行等比例縮放。

  • 使用 WebP 格式進(jìn)行壓縮。WebP 格式使用有損壓縮，但可以在保持較高質(zhì)量的同時(shí)減少文件大小。

  • 嘗試使用更高質(zhì)量的壓縮算法。如果正在使用默認(rèn)的算法，請(qǐng)嘗試使用更高質(zhì)量的算法進(jìn)行壓縮。

  • 調(diào)整顏色空間。嘗試將顏色空間更改為 sRGB，這可以減少量化的影響。

  • 減少圖像的色深。嘗試將圖像的色深降低到較低的級(jí)別，這可以減少量化的影響。

  • 使用 dithering（抖動(dòng)）技術(shù)。抖動(dòng)技術(shù)可以在顏色變化較大的區(qū)域添加噪聲，從而減少彩虹斑的出現(xiàn)。

  • 增加圖像的分辨率。嘗試將圖像的分辨率增加到較高的級(jí)別，這可以減少量化的影響。

  • 調(diào)整圖像的亮度和對(duì)比度。在某些情況下，調(diào)整圖像的亮度和對(duì)比度可以減少彩虹斑的出現(xiàn)。

  • 在繪制到 Canvas 之前先進(jìn)行色彩空間轉(zhuǎn)換。例如，將圖像轉(zhuǎn)換為 YUV 色彩空間，這可以減少量化引起的問題。

需要注意的是，以上解決方法并不一定適用于所有情況，具體取決于圖像的特點(diǎn)和要求。使用這些方法可能會(huì)影響圖像的視覺質(zhì)量，需要在權(quán)衡文件大小和視覺質(zhì)量之間做出選擇。

六、使用 Canvas 進(jìn)行圖像壓縮時(shí)，出現(xiàn)傳入不同的圖像質(zhì)量系數(shù) quality，生成的 base64 字符串卻不變的情況

通過上述壓縮方法進(jìn)行圖像壓縮時(shí)，在 quality 參數(shù)一定范圍內(nèi)，以 0.05 遞減 quality 參數(shù)，同時(shí)對(duì) quality 進(jìn)行保留兩位小數(shù)處理后再傳入 toDataURL 方法進(jìn)行壓縮時(shí)，存在生成的 base64 的大小一直不變，也就是 base64 字符串不變，產(chǎn)生該現(xiàn)象具體原因不詳。

現(xiàn)象如圖：

  • 對(duì) quality 進(jìn)行保留兩位小數(shù)處理

js上傳圖片壓縮,前端技術(shù),javascript,開發(fā)語言,ecmascript

說明：圖中 base64 碼只取前 1000 個(gè)字符作為對(duì)比。

  • 未對(duì) quality 進(jìn)行小數(shù)處理

js上傳圖片壓縮,前端技術(shù),javascript,開發(fā)語言,ecmascript文章來源地址http://www.zghlxwxcb.cn/news/detail-677684.html

到了這里，關(guān)于如何使用js對(duì)圖像進(jìn)行壓縮的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包