利用cropper.js实现选择图片裁剪上传

公司还是用的phpcms系统，头像上传还是用的flash，导致大部分浏览器都无法用了，只能升级了。

用的cropper.js

核心代码如下：

1.                                 <img id="image" src="statics/cropper/default-avatar.png">
   
2.                                 <div style = "margin: 5px 0;">
   
3.                                 <img src = "{$avatar[180]}" id = "cropImg" style = "width:100px;height:100px; background: #f2f2f2;"/>
   
4.                                 </div>
   
5.                                 <div>
   
6.                                         <input type="file" onchange="selectImage(this);"/>
   
7.                                         <button onclick="save()">保存头像</button>
   
8.                                 </div>
   
9. 
   
10.                                 <script>
    
11.                                         var selectImg = false;
    
12.                                         var cropper = new Cropper($('#image')[0], { // 初始化cropper
    
13.        aspectRatio: 1/1, // 裁剪比例是1：1正方形
    
14.                                         });
    
15.                                         function save() {
    
16.   if(!selectImg) {
    
17.     layer.msg('请先选择图片');
    
18.     return false;
    
19.                                                 }
    
20.                                                 let data = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // 点保存按钮，把裁剪的图片显示在预览窗口
    
21.                                                 $('#cropImg').attr('src', data);
    
22. 
    
23.                                                 cropper.getCroppedCanvas().toBlob((blob) => { // 生成blob上传
    
24.   const formData = new FormData();
    
25.   formData.append('avatar', blob , 'avatar.jpg');
    
26.   $.ajax('上传地址', {
    
27.     type: 'POST',
    
28.     data: formData,
    
29.     processData: false,
    
30.     contentType: false, // false就是自动判断类型
    
31.     success() {
    
32.       layer.msg('头像上传成功');
    
33.     },
    
34.     error(res) {
    
35.       layer.msg('错误');
    
36.     },
    
37.                                                         });
    
38.                                                 }, 'image/jpeg');
    
39.                                         }
    
40. 
    
41.                                         function selectImage(file) {
    
42.                                                 selectImg = true;
    
43.                                                 if (!file.files || !file.files[0]) {
    
44.                                                         return;
    
45.                                                 }
    
46.                                                 var reader = new FileReader();
    
47.                                                 reader.onload = function (evt) {
    
48.                                                         $('#image').attr('src', evt.target.result);
    
49.                                                         cropper.replace(evt.target.result, false); // 重新选择图片，必须用这个
    
50.                                                 }
    
51.                                                 reader.readAsDataURL(file.files[0]);
    
52. 
    
53.                                         }
    
54.                                 </script>

复制代码

几点注意下：
formData对象可以直接添加文件数据，并且不需要设置contentType类型；

重新选择图片，必须用cropper.replace方法设置新图片，否则图片不会变；

完事。

有关PHP系统、Discuz或网站等各种问题，可以联系QQ1069971363寻求付费支持