利用cropper.js实现选择图片裁剪上传
公司还是用的phpcms系统，头像上传还是用的flash，导致大部分浏览器都无法用了，只能升级了。用的cropper.js
核心代码如下：
<img id="image" src="statics/cropper/default-avatar.png">
<div style = "margin: 5px 0;">
<img src = "{$avatar}" id = "cropImg" style = "width:100px;height:100px; background: #f2f2f2;"/>
</div>
<div>
<input type="file" onchange="selectImage(this);"/>
<button onclick="save()">保存头像</button>
</div>
<script>
var selectImg = false;
var cropper = new Cropper($('#image'), { // 初始化cropper
aspectRatio: 1/1, // 裁剪比例是1：1正方形
});
function save() {
if(!selectImg) {
layer.msg('请先选择图片');
return false;
}
let data = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // 点保存按钮，把裁剪的图片显示在预览窗口
$('#cropImg').attr('src', data);
cropper.getCroppedCanvas().toBlob((blob) => { // 生成blob上传
const formData = new FormData();
formData.append('avatar', blob , 'avatar.jpg');
$.ajax('上传地址', {
type: 'POST',
data: formData,
processData: false,
contentType: false, // false就是自动判断类型
success() {
layer.msg('头像上传成功');
},
error(res) {
layer.msg('错误');
},
});
}, 'image/jpeg');
}
function selectImage(file) {
selectImg = true;
if (!file.files || !file.files) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
$('#image').attr('src', evt.target.result);
cropper.replace(evt.target.result, false); // 重新选择图片，必须用这个
}
reader.readAsDataURL(file.files);
}
</script>
几点注意下：
formData对象可以直接添加文件数据，并且不需要设置contentType类型；
重新选择图片，必须用cropper.replace方法设置新图片，否则图片不会变；
完事。
页:
[1]