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>×</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 })