版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/snowflake5/article/details/90474985
#HTML
<link rel="stylesheet" type="text/css" href="webuploader.css?v=16"> <link rel="stylesheet" type="text/css" href="cropper.min.css?v=16"> <img src="" class="showImg"/> <input type="file" class="fileInput" accept="image/*" hidden /> <div class="upload">上传照片</div> <div id="cropperImage" style="display: none;position: fixed;left:0;top:0;width:100%;height:100%;z-index:10;"> <div style="padding: 5px;position:absolute;left:0;top:0;width:100%;display:flex;justify-content: flex-end;z-index:100"> <div style="float: right;"> <button id="image_save" style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border:1px solid #1E9FFF;background-color: #1E9FFF;color: #fff;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;">保存</button> <button id="image_cancel" style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border:1px solid #ccc;background-color: #ccc;color: #fff;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;">取消</button> </div> <div style="clear: both;"></div> </div> <div class="upload-img" style="width:100%;height: 100%;"></div> </div> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="webuploader.min.js"></script> <script type="text/javascript" src="cropper.min.js"></script> <script> $(function(){ var uploader,width=300,height=300;//剪栽区域 $(".upload").on('click', function() { $(".fileInput").val(''); uploader != undefined && uploader.destroy(); $(".fileInput").trigger("click"); }); $(".fileInput").on('change', function() { var file = this.files[0]; //获取上传图片，IE有兼容性问题 if (!(file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/png')) { $(".fileInput").val(''); alert('支持图片格式：GIF、JPG、JPEG、PNG'); return; } webuploadTool(file); }); /** * 上传 */ function webuploadTool(file){ uploader = WebUploader.create({ auto: true,// 选完文件后，是否自动上传。 swf: "webuploader/Uploader.swf", server:上传服务地址, fileNumLimit: 1, fileSizeLimit: 5 * 1024 * 1024, // 5 M fileSingleSizeLimit: 5 * 1024 * 1024, // 5 M accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, threads:1, compress:{ width: width, height: height, } }); var reader = new FileReader(); reader.onload = function() { var url = reader.result; clipFn(url); } reader.readAsDataURL(file); uploader.on('uploadSuccess', function(file, rs) { // 图片上传回调函数 if (rs.error && rs.error.code == 1) { alert(rs.message); return; } $(".showImg").attr('src':rs.url); }); } /** * @param {剪栽文件} file */ function clipFn(url){ //裁剪弹窗 $(".upload-img").html('<img id="image" src="' + url + '" />') $("#cropperImage").show(); $image = $(".upload-img").find("#image"); $image.attr("src",url); $("#image_save").off('click').on("click", () => { var canVas = $image.cropper("getCroppedCanvas", undefined) var file = convertBase64UrlToBlob(canVas.toDataURL()); uploader.addFiles(file); $("#cropperImage").hide(); }) $("#image_cancel").off('click').on("click", () => { $(".fileInput").val(''); $("#cropperImage").hide(); }) ///////////////// $image.cropper({ aspectRatio: width/height, //比率 viewMode: 1, //裁剪框只能在图片范围内移动 dragMode: "move", restore: !1, guides: 1, resizable: true, //是否允许改变剪裁框的大小。 cropBoxMovable: !1, cropBoxResizable: !1, autoCropArea: 0.7, crop: function(data) { data.height = height; data.width = width; } }) } /** * @param {以base64的图片url数据转换为Blob用webuploader上传给后台} urlData */ function convertBase64UrlToBlob(urlData) { var bytes = window.atob(urlData.split(',')[1]); 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/jpeg' }); } }); </script> 资源
Webupload:https://fex.baidu.com/webuploader/
copper:https://www.bootcdn.cn/cropper/
文章来源: https://blog.csdn.net/snowflake5/article/details/90474985