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相关联了

<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">

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 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Cropper</title>
 6         <link rel="stylesheet" href="../dist/amazeui.min.css">
 7         <link rel="stylesheet" href="../dist/amazeui.cropper.css">
 8         <link rel="stylesheet" href="demo.css">
 9         <script src="../dist/jquery.min.js" charset="utf-8"></script>
10         <script src="../dist/amazeui.min.js" charset="utf-8"></script>
11         <script src="../dist/cropper.min.js" charset="utf-8"></script>
12         <script src="demo.js" charset="utf-8"></script>
13     </head>
14     <body>
15         <div class="am-g">
16             <div class="am-u-md-9">
17                 <div class="img-container">
18                     <img id="image" alt="Picture">
19                 </div>
20             </div>
21             <div class="am-u-md-3">
22                 <div class="am-img-preview preview-lg am-circle"></div>
23                 <div class="am-img-preview preview-md am-circle"></div>
24                 <div class="am-img-preview preview-sm am-circle"></div>
25             </div>
26         </div>
27         <div class="am-g docs-buttons">
28             <fieldset>
29                 <legend>头像剪裁 1:1</legend>
30                 <div class="am-form-group am-form-file">
31                     <button type="button" class="am-btn am-btn-primary am-btn-sm">
32                         <i class="am-icon-cloud-upload"></i> 选择要上传的文件
33                         <input type="file" id="inputImage" name="file" accept="image/*">
34                     </button>
35                 </div>
36                 <div class="am-form-group">
37                     <div id="file-list"></div>
38                     <button type="button"
39                         class="am-btn am-btn-primary am-btn-sm"
40                         data-method="zoom"
41                         data-option="0.1">
42                         <i class="am-icon-search-plus"></i> 放大
43                     </button>
44                     <button type="button" class="am-btn am-btn-primary am-btn-sm"
45                         data-method="zoom"
46                         data-option="-0.1">
47                         <i class="am-icon-search-minus"></i> 缩小
48                     </button>
49                     <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open"
50                         data-method="getCroppedCanvas">
51                         <i class="am-icon-camera"></i> 截取图像
52                     </button>
53                 </div>
54             </fieldset>
55         </div>
56         <div class="am-modal" tabindex="-1" id="cropped-modal">
57             <div class="am-modal-dialog">
58                 <div class="am-modal-hd"> 截取图像
59                     <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
60                 </div>
61                 <div class="am-modal-bd"></div>
62                 <div class="am-modal-footer">
63                     <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">
64                     <button type="button" class="am-btn am-btn-primary">
65                         <i class="am-icon-download"></i>
66                             下载
67                     </button>
68                     </a>
69                 </div>
70             </div>
71         </div>
72     </body>
73 </html>

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                 // 显示 Modal
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'));
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 complete
51                        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 += '<span class="am-badge">' + this.name + '</span> ';
63             });
64             $('#file-list').html(fileNames);
65         });
66     } else {
67         $inputImage.prop('disabled', true).parent().addClass('disabled');
68     }
69 })