開發圖片上傳組件

1、開發圖片上傳組件

組件具體內容，如圖所示，順便問一下，我如何在簡書裏面粘貼代碼，按照網上說的方法更改富文本編輯，沒有成功，估計編輯器發生變化了。

注意：imgUrl就是咱們獲取的圖片地址

2、頁面運用

3、頁面效果

 

因爲後臺接口咱們用的是阿里雲的OSS服務，因此，代碼就不貼了。感謝你們的收看。

忘了一個更重要的事情，那就是圖片壓縮的代碼，把如下代碼單獨寫在一個文件裏，而後運用的時候調用便可。

```

/**

* 得到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

*

*/

$.fn.localResizeIMG= function(obj) {

this.on('change',function() {

varfile= this.files[0];

varURL=URL||webkitURL;

varblob=URL.createObjectURL(file);

// 執行前函數

if($.isFunction(obj.before)) {obj.before(this, blob, file) };

_create(blob, file);

this.value='';// 清空臨時數據

});

/**

* 生成base64

* @param blob 經過file得到的二進制

*/

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

* 兼容修復移動設備須要引入mobileBUGFix.js

*/

varbase64=canvas.toDataURL('image/jpeg',obj.quality||0.8);

// 修復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);

}

// 修復android

if( navigator.userAgent.match(/Android/i) ) {

varencoder= newJPEGEncoder();

base64=encoder.encode(ctx.getImageData(0,0,w,h),obj.quality*100||80);

}

// 生成結果

varresult={

blob:blob,

base64:base64,

clearBase64:base64.substr( base64.indexOf(',')+1)

};

// 執行後函數

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);

}

});

*/

```