js压缩图片

/**
????* 获得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" />

js压缩图片

原文地址：https://www.cnblogs.com/ksy-zsy/p/8977412.html