本篇文章给大家带来的内容是关于移动端cropper.js如何实现裁剪图片并上传（代码分析） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
引入cropper使用
<link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script>
HTML结构
<li class="ui-border-bottom"> <a href="javascripts:void(0);">头像 <span class="pull-right user-header"> <img class="rounded" id="avatar" src="../images/user.jpg" alt="avatar"> <input type="file" class="sr-only" id="input" name="image" accept="image/*"> </span> </a> </li>
<div class="common-layer" id="modal"> <div class="layer-content"> <div class="layer-title"> <span class="cancel-btn" id="cancle">取消</span> <h4>截图头像</h4> </div> <div class="layer-area"> <div class="img-container"> <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> </div> <a class="ui-btn m-t-15" id="crop" href="javascripts:void(0);">保存</a> </div> </div> </div>
js引用：
具体cropper.js 使用可查看官网
$(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');
}
});
});
}
});
})相关推荐：
javascript - 如何在手机端实现裁剪图片+上传功能
以上是移动端cropper.js如何实现裁剪图片并上传（代码分析）的详细内容。更多信息请关注PHP中文网其他相关文章！
