ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)

插件描述：移动端头像上传，支撑头像预览和放大缩小平移，内置上传至后端请求方法。

注：请在移动端用手势查看缩放效果，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后的回调方法