大家好，今天我要給大家說說圖片上傳的功能。這個功能在項(xiàng)目中經(jīng)常用到，為此，我將寫個公共組件，方便大家直接調(diào)用。廢話少說，進(jìn)入主題。
一、開發(fā)圖片上傳組件
組件具體內(nèi)容，如圖所示，順便問一下，我如何在簡書里面粘貼代碼，按照網(wǎng)上說的方法更改富文本編輯，沒有成功，估計編輯器發(fā)生變化了。
二、頁面運(yùn)用
三、頁面效果
由于后臺接口我們用的是阿里云的OSS服務(wù)，所以，代碼就不貼了。感謝大家的收看。
忘了一個更重要的事情，那就是圖片壓縮的代碼，把以下代碼單獨(dú)寫在一個文件里，然后運(yùn)用的時候調(diào)用即可。
```
/**
* 獲得base64
* @param {Object} obj
* @param {Number} [obj.width] 圖片需要壓縮的寬度，高度會跟隨調(diào)整
* @param {Number} [obj.quality=0.8] 壓縮質(zhì)量，不壓縮為1
* @param {Function} [obj.before(this, blob, file)] 處理前函數(shù),this指向的是input:file
* @param {Function} obj.success(obj) 處理后函數(shù)
* @example
*
*/
$.fn.localResizeIMG= function(obj) {
this.on('change',function() {
varfile= this.files[0];
varURL=URL||webkitURL;
varblob=URL.createObjectURL(file);
// 執(zhí)行前函數(shù)
if($.isFunction(obj.before)) {obj.before(this, blob, file) };
_create(blob, file);
this.value='';// 清空臨時數(shù)據(jù)
});
/**
* 生成base64
* @param blob 通過file獲得的二進(jìn)制
*/
function_create(blob) {
varimg= newImage();
img.src=blob;
img.onload= function() {
var_this= this;
//生成比例
varw=_this.width,
h=_this.width,
scale=w/h;
w=obj.width||w;
h=w/scale;
//生成canvas
varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');
$(canvas).attr({width:w, height:h});
ctx.drawImage(_this,0,0, w, h);
/**
* 生成base64
* 兼容修復(fù)移動設(shè)備需要引入mobileBUGFix.js
*/
varbase64=canvas.toDataURL('image/jpeg',obj.quality||0.8);
// 修復(fù)IOS
if( navigator.userAgent.match(/iphone/i) ) {
varmpImg= newMegaPixImage(img);
mpImg.render(canvas, { maxWidth:w, maxHeight:h, quality:obj.quality||0.8, orientation:6});
base64=canvas.toDataURL('image/jpeg',obj.quality||0.8);
}
// 修復(fù)android
if( navigator.userAgent.match(/Android/i) ) {
varencoder= newJPEGEncoder();
base64=encoder.encode(ctx.getImageData(0,0,w,h),obj.quality*100||80);
}
// 生成結(jié)果
varresult={
blob:blob,
base64:base64,
clearBase64:base64.substr( base64.indexOf(',')+1)
};
// 執(zhí)行后函數(shù)
obj.success(result);
};
}
};
/* 使用方法
$('input:file').localResizeIMG({
width: 100,
quality: 0.1,
//before: function (_this, blob) {},
success: function (result) {
var img = new Image();
img.src = result.base64;
$('body').append(img);
console.log(result);
}
});
*/
```
為了更好的服務(wù)大家，請加入我們的技術(shù)交流群：（511387930），同時您也可以掃描下方的二維碼關(guān)注我們的公眾號，每天我們都會分享經(jīng)驗(yàn)，謝謝大家。
