插件描述：移動端頭像上傳，支撐頭像預覽和放大縮小平移，內置上傳至后端請求方法。

注：請在移動端用手勢查看縮放效果，PC端無法縮放

Mavatar

移動端頭像上傳，支撐頭像預覽和放大縮小平移，內置上傳至后端請求方法。

使用

安裝npm?install?mavatar

引入import?Mavatar?from?'mavatar'

創建html的dom標簽并定義id名,在dom加載完成的周期里，如 react的(componentDidMount), vue的(mounted)中進行實例化。也可以在純js中使用，引入mavatar.js即可。

React中使用示例import?Mavatar?from?'mavatar'

let?avatar;

export?default?class?App?extends?Component?{

componentDidMount()?{

avatar?=?new?Mavatar({

el:?'#avatar',

backgroundColor:?'#ff6633'

});

}

handleClip?=?(e)?=>?{

avatar.imageClipper((dataurl)?=>?{

console.log(dataurl);

});

}

handleReset?=?(e)?=>?{

avatar.resetImage();

}

render()?{

return?(

裁剪

重置

);

}

}

Vue中使用示例

在vue中使用可以直接使用該vue組件vue-imageClip

普通js中使用示例

下載倉庫中src/lib/mavatar.js保存到本地并引入html>

Mavatar

裁剪

重置

var?avatar?=?new?Mavatar({el:?'#avatar',backgroundColor:?'#fff'});

function?clip()?{

avatar.imageClipper(function?(data)?{

alert('裁剪成功，生成的圖片已覆蓋在上傳框內');

console.log(data);

//??將圖片上傳至后臺

avatar.upload({

url:?'http://localhost:3080/profile',

name:?'avatar',

data:?{userName:?'hzy0913',?info:?'someInfo'},

success:?function?(data)?{

console.log(data)

},

error:?function?(error)?{

console.log(error)

}

});

})

}

function?reset()?{

avatar.resetImage();

}

方法

裁剪: 圖片裁剪方法，回調中可以獲取裁剪完成base64avatar.imageClipper(function(dataurl)?{

console.log(dataurl);

});

重置:重置頭像上傳方法, 可以清空已上傳的圖片avatar.resetImage()

獲取頭像上傳前的信息(大小，尺寸等)。const?flieInfo?=?avatar.getfileInfo()

獲取頭像完成裁剪生成的base64(注意！使用時確保圖片已完成裁剪，圖片裁剪為異步方法)。const?dataUrl?=?avatar.getDataUrl()

圖片上傳至服務器的內置ajax方法(使用multipart/form-data類型模擬form格式進行上傳)avatar.upload({

url:?'http://localhost:3080/profile',

name:?'avatar',

data:?{userName:?'hzy0913',?info:?'someInfo'},

success:?function?(data)?{

console.log(data)

},

error:?function?(error)?{

console.log(error)

}

});參數類型描述

urlstring必傳，上傳的請求地址

namestring必傳，圖片上傳的請求name

dataobject發送到服務器的其他數據，選填

successfunction上傳成功的回調，選填

errorfunction上傳失敗的回調，選填

參數

實例化時傳入的配置參數option對象 avatar = new Mavatar(option)參數值描述

elid(string)，無默認值必傳，dom的id

width(string)默認200px不傳則默認為生成200px寬的頭像上傳域

height(string)默認200px不傳則默認為生成200px高的頭像上傳域

backgroundColor(string)默認為空不傳則裁剪時空的區域為透明

hd(boolean)默認為true默認為生成兩倍大小圖片，解決高清屏中圖片生成不清晰

fileOnchange(function)圖片本地上傳到input后的回調方法

總結

以上是生活随笔為你收集整理的ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。