js插件---强大的图片裁剪Cropper

一、总结

一句话总结：官网或者github里面的文档或者demo才是真的详细

使用的话找到图片裁剪后的base64数据，然后这个数据可下载可传递到服务器

 

1、本地运行出现Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported如何解决？

弄到服务器上面去运行就OK了

 

2、如何获取到裁剪后的图片的base64的数据？

a、首先发现这里提供裁剪好的图片的下载功能，所以知道一定是某段js代码将数据和这个下载的button相关联了

 

b、然后去js代码中找这个下载按钮出现的位置，一下子就搜索到了

24                 console.log(result);25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);26                 $('#download').attr('href', result.toDataURL('image/jpeg')); 27 console.log(result.toDataURL('image/jpeg'));

一下子就知道了result.toDataURL('image/jpeg')就是获取裁剪好的图片的base64的数据

 

3、如何将canvas转换为base64图片数据？

这里的result就是canvas，用的toDataURL方法

27 console.log(result.toDataURL('image/jpeg'));

 

4、如何获取插件完整详细的API和demo？

官网或者github里面的文档或者demo才是真的详细

 

5、如何实现点击下载图片？

将a标签的href设置为图片的base64数据，那么点击这个a标签就是下载图片

24                 console.log(result);25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);26                 $('#download').attr('href', result.toDataURL('image/jpeg')); 27 console.log(result.toDataURL('image/jpeg'));

 

并且指定download可以指定下载图片的名字

 

 

二、强大的图片裁剪Cropper

百度盘下载地址：链接：https://pan.baidu.com/s/1LZtqQyIR-DNjjUDQ3XxK5A 密码：odgt

 

1、截图

 

 

 

2、代码

index.html

1  2  3      4         
      5          6         
      7         
      8         
      9         10         11         12         13     14     15         
     
      16             
      
       17                 
       
        18                     
        19                 
       
20             
      
21             
      
       22                 
       
23                 
       
24                 
       
25             
      
26         
     
27         
     
      28             
      
       29                 
       
头像剪裁 1:1
30                 
       
        31                     
        32                          选择要上传的文件33                         34                     35                 
       
36                 
       
        37                     
        
38                     
        42                          放大43                     44                     
        47                          缩小48                     49                     
        51                          截取图像52                     53                 
       
54             
      
55         
     
56         
     
      57             
      
       58                 
       
         截取图像59                     
        ×60                 
       
61                 
       
62                 
       
        63                     
        64                     65                         66                             下载67                     68                     69                 
       
70             
      
71         
     
72     73 

 

demo.js

1 $(function() { 2     'use strict'; 3  4     // 初始化 5     var $image = $('#image'); 6     $image.cropper({ 7         aspectRatio: '1', 8         preview: '.am-img-preview', 9         zoomOnWheel: false,10     })11 12     // 事件代理绑定事件13     $('.docs-buttons').on('click', '[data-method]', function() {14         var $this = $(this);15         var data = $this.data();16         var result = $image.cropper(data.method, data.option, data.secondOption);17 18         switch (data.method) {19 20             case 'getCroppedCanvas':21             if (result) {22 23                 // 显示 Modal24                 console.log(result);25                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);26                 $('#download').attr('href', result.toDataURL('image/jpeg'));27                 console.log(result.toDataURL('image/jpeg'));28             }29             break;30         }31     })32 33     // 上传图片34     var $inputImage = $('#inputImage');35     var URL = window.URL || window.webkitURL;36     var blobURL;37 38     if (URL) {39         $inputImage.change(function () {40             var files = this.files;41             var file;42 43             if (files && files.length) {44                file = files[0];45 46                if (/^image\/\w+$/.test(file.type)) {47                     blobURL = URL.createObjectURL(file);48                     $image.one('built.cropper', function () {49 50                         // Revoke when load complete51                        URL.revokeObjectURL(blobURL);52                     }).cropper('reset').cropper('replace', blobURL);53                     $inputImage.val('');54                 } else {55                     window.alert('Please choose an image file.');56                 }57             }58 59             // Amazi UI 上传文件显示代码60             var fileNames = '';61             $.each(this.files, function() {62                 fileNames += '' + this.name + ' ';63             });64             $('#file-list').html(fileNames);65         });66     } else {67         $inputImage.prop('disabled', true).parent().addClass('disabled');68     }69 })