cropper左右移动_移动端cropper.js 裁剪图片并上传

引入cropper使用

HTML结构

头像

取消

截图头像

保存

$(function() {

//修改头像 参加文件https://blog.csdn.net/weixin_38023551/article/details/78792400

var avatar = document.getElementById('avatar');

var image = document.getElementById('image');

var input = document.getElementById('input');

var $modal = $('#modal');

var cropper;

//点击图片

input.addEventListener('change', function (e) {

var files = e.target.files;

var done = function (url) {

input.value = '';

image.src = url;

$modal.show(function() {

//初始化

cropper = new Cropper(image, {

aspectRatio: 1,

viewMode:1,

});

});

};

var reader;

var file;

var url;

if (files && files.length > 0) {

file = files[0];

if (URL) {

done(URL.createObjectURL(file));

} else if (FileReader) {

reader = new FileReader();

reader.onload = function (e) {

done(reader.result);

};

reader.readAsDataURL(file);

}

}

});

//关闭弹窗

document.getElementById('cancle').addEventListener('click', function () {

$modal.hide(function() {

cropper.destroy();

cropper = null;

});

});

//保存截图

document.getElementById('crop').addEventListener('click', function () {

var initialAvatarURL;

var canvas;

$modal.hide(function() {

cropper.destroy();

cropper = null;

});

if (cropper) {

canvas = cropper.getCroppedCanvas({

width: 120,

height: 120,

});

initialAvatarURL = avatar.src;

avatar.src = canvas.toDataURL('image/jpeg');

//保存数据

canvas.toBlob(function (blob) {

var formData = new FormData();

formData.append('avatar', blob);

$.ajax('https://jsonplaceholder.typicode.com/posts', {

method: 'POST',

data: formData,

processData: false,

contentType: false,

success: function () {

console.log('Upload success');

},

error: function () {

avatar.src = initialAvatarURL;

console.log('Upload error');

}

});

});

}

});

})