基于cropper实现图片上传，剪切，下载
参考：https://fengyuanchen.github.io/cropper
http://blog.csdn.net/hongwangzhang/article/details/50215761；
https://www.zhihu.com/question/26022520
ps：以下是主要代码 和 cropper相关的代码和文件可以在上面第一个链接中寻找 或者 点击此处
html部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>图片上传剪切下载</title> 8 <link rel="stylesheet" href="css/cropper.min.css"> 9 <link rel="stylesheet" href="css/column.cropper.css"/> 10 </head> 11 <body> 12 <div class="column-cover-container"> 13 <input type="file" id="cropper-upload-img" title="请选择封面图片"/> 14 <div id="cropper-result" class="column-cover"></div> 15 </div> 16 <div id="cropper-popup" class="cropper-popup-style"> 17 <div class="cropper-wrapper"> 18 <div class="cropper-header"> 19 <p class="cropper-header-title">剪切图片</p> 20 <a class="close-btn" id="cropper-close-btn">X</a> 21 </div> 22 <div class="container"> 23 <img id="cropper-image" src="" alt="Picture"> 24 </div> 25 <div class="cropper-footer"> 26 <button type="button" class="do-crop-btn" id="crop-button">Crop</button> 27 </div> 28 </div> 29 </div> 30 <button id="column-download">下载</button> 31 32 <!-- Scripts --> 33 <script src="js/jquery.min.js"></script> 34 <script src="js/cropper.min.js"></script> 35 <script src="js/cropperimg.js"></script> 36 </body> 37 </html>
css部分
ps：css有的对cropper做了重构
1 .column-cover-container{ 2 width:240px; 3 height:135px; 4 border:1px solid #ddd; 5 position: relative; 6 } 7 .column-cover-container .column-cover{ 8 height: 100%; 9 } 10 .column-cover-container .column-cover img{ 11 width: 100%; 12 height: auto; 13 } 14 .column-cover-container input{ 15 width: 100%; 16 height:100%; 17 outline: none; 18 opacity: 0; 19 z-index: 1; 20 position: absolute; 21 top: 0; 22 left: 0; 23 } 24 .cropper-popup-style{ 25 width:100%; 26 height:100%; 27 display: none; 28 position: fixed; 29 top:0; 30 left:0; 31 z-index: 10000; 32 background: rgba(0, 0, 0, .2); 33 } 34 .cropper-popup-style .cropper-wrapper{ 35 width:640px; 36 height:420px; 37 padding:3px; 38 border-radius: 3px; 39 background: #ffffff; 40 position: absolute; 41 left: 50%; 42 top:50%; 43 -webkit-transform: translate(-50%, -50%); 44 -moz-transform: translate(-50%, -50% ); 45 -ms-transform: translate(-50%, -50% ); 46 -o-transform: translate(-50%, -50% ); 47 transform: translate(-50%, -50% ); 48 } 49 .cropper-popup-style .cropper-header{ 50 height:30px; 51 } 52 .cropper-popup-style .cropper-header-title{ 53 height:30px; 54 margin:0; 55 line-height: 30px; 56 text-align: center; 57 } 58 .cropper-popup-style .close-btn{ 59 width:20px; 60 height:20px; 61 line-height: 20px; 62 text-align: center; 63 text-decoration: none; 64 position: absolute; 65 right: 5px; 66 top: 5px; 67 cursor: pointer; 68 } 69 .cropper-popup-style .do-crop-btn{ 70 width: 50px; 71 height: 28px; 72 color: #fff; 73 border: none; 74 -webkit-box-shadow: none; 75 -moz-box-shadow: none; 76 box-shadow: none; 77 background: #0275D8; 78 position: absolute; 79 left:300px; 80 bottom: 2px; 81 } 82 .cropper-popup-style .container{ 83 width:100%; 84 height:360px; 85 } 86 .cropper-popup-style .cropper-point.point-se{ 87 width:5px; 88 height:5px; 89 }
js部分
(function($){ //定义相关变量 var $image = $('#cropper-image'); var $upload = $('#cropper-upload-img'); var $button = $('#crop-button'); var $result = $('#cropper-result'); var $closeBtn = $("#cropper-close-btn"); var $cropperPopup = $("#cropper-popup"); var $columnDownload = $("#column-download"); var croppable = false; var URL = window.URL || window.webkitURL; var blobURL,imgBlob; //base64转图片blob function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : 'image/png'}); } //下载blob function downFile(blob, fileName,e) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName); } else { if(document.getElementById("cropper-load-img")){ var el = document.getElementById("cropper-load-img"); el.parentNode.removeChild(el); } var link = document.createElement('a'); link.id="cropper-load-img"; link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } } //上传图片后的操作 $upload.change(function(e){ $cropperPopup.show(); var files = this.files; var file; if (!$image.data('cropper')) { return; } 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); $upload.val(''); } else { window.alert('请选择一张图片!'); } } }); //初始化 $image.cropper({ aspectRatio: 16 / 9, viewMode: 1, built: function () { croppable = true; } }); //准备对图片进行裁剪 $button.on('click', function () { var img = new Image; var croppedCanvas; $cropperPopup.hide(); if (!croppable) { return; } // Crop croppedCanvas = $image.cropper('getCroppedCanvas'); // Show $image.crossOrigin = "anonymous" ; $result.html('<img src="' + croppedCanvas.toDataURL() + '">'); //最终生成的文件； imgBlob = convertBase64UrlToBlob(croppedCanvas.toDataURL()); //下载文件 $columnDownload.off("click").bind("click",function(){ downFile(imgBlob,Math.floor((Math.random()*Math.pow(10,6)))；
); }); }); //关闭弹窗 $closeBtn.on("click",function(){ $cropperPopup.hide(); }) })(jQuery);
