<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>头像上传</title> <link rel="stylesheet" href="../../../component/pear/css/pear.css" /> </head> <body class="pear-container"> <div class="layui-row layui-col-space15"> <div class="layui-col-xs9"> <div style="height:325px;background-color: rgb(247, 247, 247);"> <img id="sourceImage" src=""> </div> </div> <div class="layui-col-xs3" style="padding-left:0px;"> <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;"> </div> </div> </div> <div class="layui-row"> <div class="layui-form-item"> <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;"> <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button> <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button> <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button> <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label> <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片"> </div> <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div> </div> </div> <script src="../../../component/layui/layui.js"></script> <script src="../../../component/pear/pear.js"></script> <script> layui.use(['jquery','layer','cropper'], function () { let $ = layui.jquery; let layer = layui.layer; let cropper = layui.cropper; var options = { aspectRatio: 1 / 1, // 裁剪框比例 preview: '#previewImage', // 预览div viewmode: 1 }; $("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src")); $("#sourceImage").cropper(options); window.submitForm = function () { $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题 $("#sourceImage").cropper("getCroppedCanvas", { width: 280, height: 140 }).toBlob(function (blob) { var timeStamp = Date.parse(new Date()); var fileName = timeStamp + '.jpg'; var formData = new FormData(); formData.append('file', blob, fileName); formData.append('fileName', fileName); formData.append('fileToken', timeStamp); var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function (e) { var data={ index:parent.layer.getFrameIndex(window.name), newAvatar : e.target.result }; console.log(data); parent.window.callback(data); }; }); } $(".pear-btn").on('click', function () { var event = $(this).attr("cropper-event"); if (event === 'rotate') { var option = $(this).attr('data-option'); $("#sourceImage").cropper('rotate', option); } else if (event === 'reset') { $("#sourceImage").cropper('reset'); } $("#uploadPicture").change(function () { var r = new FileReader(); var f = this.files[0]; var uploadFileSize = f.size / 1024; if (uploadFileSize > 5120) { parent.layer.msg("上传文件不得超过5m", { icon: 5 }); return false; } r.readAsDataURL(f); r.onload = function (e) { $("#sourceImage") .cropper('destroy') .attr('src', this.result) .cropper(options); }; }); }); }); </script> </body> </html>