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

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

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>Cropper</title>
         <link rel="stylesheet" href="../dist/amazeui.min.css">
         <link rel="stylesheet" href="../dist/amazeui.cropper.css">
         <link rel="stylesheet" href="demo.css">
         <script src="../dist/jquery.min.js" charset="utf-8"></script>
         <script src="../dist/amazeui.min.js" charset="utf-8"></script>
         <script src="../dist/cropper.min.js" charset="utf-8"></script>
         <script src="demo.js" charset="utf-8"></script>
     </head>
     <body>
         <div class="am-g">
             <div class="am-u-md-9">
                 <div class="img-container">
                     <img id="image" alt="Picture">
                 </div>
             </div>
             <div class="am-u-md-3">
                 <div class="am-img-preview preview-lg am-circle"></div>
                 <div class="am-img-preview preview-md am-circle"></div>
                 <div class="am-img-preview preview-sm am-circle"></div>
             </div>
         </div>
         <div class="am-g docs-buttons">
             <fieldset>
                 <legend>头像剪裁 1:1</legend>
                 <div class="am-form-group am-form-file">
                     <button type="button" class="am-btn am-btn-primary am-btn-sm">
                         <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                         <input type="file" id="inputImage" name="file" accept="image/*">
                     </button>
                 </div>
                 <div class="am-form-group">
                     <div id="file-list"></div>
                     <button type="button"
                         class="am-btn am-btn-primary am-btn-sm"
                         data-method="zoom"
                         data-option="0.1">
                         <i class="am-icon-search-plus"></i> 放大
                     </button>
                     <button type="button" class="am-btn am-btn-primary am-btn-sm"
                         data-method="zoom"
                         data-option="-0.1">
                         <i class="am-icon-search-minus"></i> 缩小
                     </button>
                     <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open"
                         data-method="getCroppedCanvas">
                         <i class="am-icon-camera"></i> 截取图像
                     </button>
                 </div>
             </fieldset>
         </div>
         <div class="am-modal" tabindex="-1" id="cropped-modal">
             <div class="am-modal-dialog">
                 <div class="am-modal-hd"> 截取图像
                     <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                 </div>
                 <div class="am-modal-bd"></div>
                 <div class="am-modal-footer">
                     <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">
                     <button type="button" class="am-btn am-btn-primary">
                         <i class="am-icon-download"></i>
                             下载
                     </button>
                     </a>
                 </div>
             </div>
         </div>
     </body>
 </html>

demo.js

 $(function() {
     'use strict';

     // 初始化
     var $image = $('#image');
     $image.cropper({
         aspectRatio: '1',
         preview: '.am-img-preview',
         zoomOnWheel: false,
     })

     // 事件代理绑定事件
     $('.docs-buttons').on('click', '[data-method]', function() {
         var $this = $(this);
         var data = $this.data();
         var result = $image.cropper(data.method, data.option, data.secondOption);

         switch (data.method) {

             case 'getCroppedCanvas':
             if (result) {

                 // 显示 Modal
                 console.log(result);
                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                 $('#download').attr('href', result.toDataURL('image/jpeg'));
                 console.log(result.toDataURL('image/jpeg'));
             }
             break;
         }
     })

     // 上传图片
     var $inputImage = $('#inputImage');
     var URL = window.URL || window.webkitURL;
     var blobURL;

     if (URL) {
         $inputImage.change(function () {
             var files = this.files;
             var file;

             if (files && files.length) {
                file = files[0];

                if (/^image\/\w+$/.test(file.type)) {
                     blobURL = URL.createObjectURL(file);
                     $image.one('built.cropper', function () {

                         // Revoke when load complete
                        URL.revokeObjectURL(blobURL);
                     }).cropper('reset').cropper('replace', blobURL);
                     $inputImage.val('');
                 } else {
                     window.alert('Please choose an image file.');
                 }
             }

             // Amazi UI 上传文件显示代码
             var fileNames = '';
             $.each(this.files, function() {
                 fileNames += '<span class="am-badge">' + this.name + '</span> ';
             });
             $('#file-list').html(fileNames);
         });
     } else {
         $inputImage.prop('disabled', true).parent().addClass('disabled');
     }
 })