快捷導(dǎo)航

js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）

更新時(shí)間：2020年10月21日 14:23:50 作者：Marydon

這篇文章主要介紹了js 壓縮圖片的示例，幫助大家利用js處理圖片，完成特殊需求，感興趣的朋友可以了解下

本文作者：Marydon

原文鏈接：https://www.cnblogs.com/Marydon20170307/p/11486511.html

1.情景展示

　　如上圖所示，點(diǎn)擊上傳圖片按鈕，調(diào)用手機(jī)攝像頭拍照功能。

　　我們知道現(xiàn)在，手機(jī)拍照在10MB左右，體積太大，在上傳到服務(wù)器前，能不能只縮小圖片的體積，而不改變圖片尺寸？

2.原因分析

　　通過canvas實(shí)現(xiàn)對(duì)圖片的重新繪制。

　　代碼展示：

/**
 * 圖片壓縮
 * @explain 借助canvas對(duì)圖片進(jìn)行重繪（canvas2DataURL）
 * @param base64Url base64格式的圖片字符串
 * @param imgAttr  重繪圖片寬度、高度、質(zhì)量等屬性的設(shè)置
 * @param callback 該函數(shù)執(zhí)行完畢后，要執(zhí)行的回調(diào)函數(shù)
 * @returns
 */
function photoCompress (base64Url, imgAttr, callback){
  var img = new Image();
  img.src = base64Url;
  img.onload = function(){
    var that = this;
    // 默認(rèn)按比例壓縮
    var w = that.width,
      h = that.height,
      // 寬高比例
      scale = w / h;
    w = imgAttr.width || w;
    h = imgAttr.height || (w / scale);
    // 默認(rèn)圖片質(zhì)量為0.7
    var quality = 0.7;
    //生成canvas
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    // 創(chuàng)建屬性節(jié)點(diǎn)
    var anw = document.createAttribute("width");
    anw.nodeValue = w;
    canvas.setAttributeNode(anw);
    var anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anh);
    ctx.drawImage(that, 0, 0, w, h);
    // 圖像質(zhì)量（0-1）
    if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
      quality = imgAttr.quality;
    }
    // 重繪后的圖片類型
    var imgType = imgAttr.type || 'image/jpeg';
    // quality值越小，所繪制出的圖像越模糊
    var base64 = canvas.toDataURL(imgType, quality);
    // 回調(diào)函數(shù)返回base64的值
    callback(base64);
  };
}

　　可自定義設(shè)置圖片質(zhì)量，圖片的寬高（通過imgAttr設(shè)置）?！　?/p>

3.完整示例

// js 獲取文件對(duì)象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
  alert("圖像上傳失敗，請(qǐng)重試！");
}
// 文件讀取對(duì)象
var reader = new FileReader();
// 圖片轉(zhuǎn)base64（Blob對(duì)象或File對(duì)象）
reader.readAsDataURL(fileObj);
// 圖片大小<=1MB，size的單位：B（1Mb=1B*1024*1024）
if(fileObj.size/1024 <= 1024) {
  reader.onload = function(e) {
    // 獲取對(duì)應(yīng)的base64
    var imgBase64 = e.target.result;
    // 將圖片的base64碼傳給后臺(tái)
    // 調(diào)用騰訊接口
    $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
      // TODO 對(duì)返回的接口數(shù)據(jù)進(jìn)行自動(dòng)填充處理
    });
  };
} else {
  // 讀取完畢
  reader.onload = function(){
    // 圖片轉(zhuǎn)換成為base64Url
    var fileBase64 = this.result;
    // 圖片參數(shù)
    var imgAttr = {quality : 0.2, type : 'img/jpeg'};
    // 回調(diào)函數(shù)
    var callBack = function (base64Codes) {
      // 圖片比較
      // 調(diào)用騰訊接口
       
    };
    // 壓縮圖片
    photoCompress(fileBase64,imgAttr,callBack);
  };
}

　　說明：

　　前端對(duì)圖片進(jìn)行重繪，對(duì)瀏覽器有一定的要求，我測(cè)試的時(shí)候在電腦端沒有問題，但是，在微信上使用時(shí)，就會(huì)很難受了，會(huì)將微信的qq瀏覽器內(nèi)核搞垮，根本無法使用。

　　不得以，放棄了在前端進(jìn)行壓縮的想法，轉(zhuǎn)而直接將圖片以流的形式提交至后臺(tái)，由java負(fù)責(zé)圖片壓縮處理。

　　補(bǔ)充：

　　圖片優(yōu)化方面可以考慮從以下幾個(gè)方面著手：減小分辨率 >壓縮圖片>chrome使用webp格式

寫在最后

　　哪位大佬如若發(fā)現(xiàn)文章存在紕漏之處或需要補(bǔ)充更多內(nèi)容，歡迎留言?。?！

以上就是js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）的詳細(xì)內(nèi)容，更多關(guān)于js 壓縮圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: