js压缩图片

Posted 2020-11-02 ksy-zsy

/**
* 获得base64
* @param {Object} obj
* @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整
* @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1
* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file
* @param {Function} obj.success(obj) 处理后函数
* @example
*
*/
var gUploadImageSrcWitdh = 0;

$.fn.localResizeIMG = function(obj) {
this.on(‘change‘, function() {
var file = this.files[0];
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (theFile) {
var image = new Image();
image.src = theFile.target.result;
image.onload = function () {
//alert("图片的宽度为" + this.width + ",长度为" + this.height);
gUploadImageSrcWitdh = this.width;

if (gUploadImageSrcWitdh < 1000) return;
// 执行前函数
if ($.isFunction(obj.before)) {
obj.before(this, blob, file)
};

_create(blob, file);
this.value = ‘‘; // 清空临时数据
};
};

});

/**
* 生成base64
* @param blob 通过file获得的二进制
*/
function _create(blob) {
var img = new Image();
img.src = blob;

img.onload = function() {
var that = this;

//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = w / scale;

//gUploadImageSrcWitdh = that.width;

//alert(that.width.toString());

//生成canvas
var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
$(canvas).attr({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);

/**
* 生成base64
* 兼容修复移动设备需要引入mobileBUGFix.js
*/
var base64 = canvas.toDataURL(‘image/jpeg‘, obj.quality || 0.8);

// 修复ios
if (navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(img);
mpImg.render(canvas, {
maxWidth: w,
maxHeight: h,
quality: obj.quality || 0.8
});
base64 = canvas.toDataURL(‘image/jpeg‘, obj.quality || 0.8);
}

// 修复android
if (navigator.userAgent.match(/Android/i)) {
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
}

// 生成结果
var result = {
base64: base64,
clearBase64: base64.substr(base64.indexOf(‘,‘) + 1)
};

// 执行后函数
obj.success(result);
};
}
};

 

* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据

function convertBase64UrlToBlob(urlData) {

var bytes = window.atob(urlData.split(‘,‘)[1]); //去掉url的头，并转换为byte

//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: ‘image/png‘ });
}

//convertBase64UrlToBlob函数是将base64编码转换为Blob
//formData.append("imageName",convertBase64UrlToBlob(base64Codes)); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同

//调用JS插件，然后把base64转换
var gUploadImageBase64;
$(‘input:file‘).localResizeIMG({
width: 800,
quality: 0.8,
success: function (result) {
gUploadImageBase64 = result.base64;
}
});

 

html页

<input type="file" id="file" name="file" accept="image/*" multiple="multiple" />