利用HTML、CSS和JavaScript实现客户端图片裁剪功能指南

<div class="container">     <div class="row">         <div class="col-xs-12">             <label class="cabinet center-block">                 <figure>                     <img src="https://user.gadjian.com/static/images/personnel_boy.png" class="gambar img-responsive img-thumbnail" id="item-img-output" alt="裁剪结果预览" />                     <figcaption><i class="fa fa-camera"></i></figcaption>                 </figure>                 <input type="file" class="item-img file center-block" name="file_photo"/>             </label>         </div>     </div> </div>  <!-- 裁剪模态框 --> <div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                 <h4 class="modal-title" id="myModalLabel">编辑图片</h4>             </div>             <div class="modal-body">                 <div id="upload-demo" class="center-block"></div>             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                 <button type="button" id="cropImageBtn" class="btn btn-primary">裁剪</button>             </div>         </div>     </div> </div>

label.cabinet{     display: block;     cursor: pointer; }  label.cabinet input.file{     position: relative;     height: 100%;     width: auto;     opacity: 0; /* 隐藏默认的文件输入框 */     -moz-opacity: 0;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);     margin-top:-30px; /* 调整位置，使其覆盖在图标上 */ }  #upload-demo{     width: 250px; /* Croppie容器的宽度 */     height: 250px; /* Croppie容器的高度 */     padding-bottom:25px; }

// 确保在引入此脚本之前已引入 jQuery 和 Croppie.js  $(document).ready(function() {     // 初始化显示默认图片     $(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");      var $uploadCrop, rawImg; // 声明Croppie实例和原始图片数据变量      // 1. 文件读取函数     function readFile(input) {         if (input.files && input.files[0]) {             var reader = new FileReader();             reader.onload = function (e) {                 rawImg = e.target.result; // 将读取的图片数据存储到rawImg                 $('#cropImagePop').modal('show'); // 显示裁剪模态框             };             reader.readAsDataURL(input.files[0]); // 以Data URL格式读取文件         } else {             // 浏览器不支持FileReader API的提示             alert("抱歉 - 您的浏览器不支持FileReader API");         }     }      // 2. 初始化Croppie     $uploadCrop = $('#upload-demo').croppie({         viewport: { // 裁剪区域的尺寸和形状             width: 150,             height: 200,             type: 'square' // 可以是 'square' 或 'circle'         },         enforceBoundary: false, // 是否强制裁剪区域在图片边界内         enableExif: true // 启用EXIF数据，处理图片方向     });      // 3. 模态框显示时绑定图片     $('#cropImagePop').on('shown.bs.modal', function(){         $uploadCrop.croppie('bind', {             url: rawImg // 将读取到的图片数据绑定到Croppie实例         }).then(function(){             console.log('jQuery bind complete');         });     });      // 4. 文件输入框内容改变事件     $('.item-img').on('change', function () {         readFile(this); // 调用文件读取函数     });      // 5. 裁剪按钮点击事件     $('#cropImageBtn').on('click', function (ev) {         $uploadCrop.croppie('result', {             type: 'base64', // 输出格式为Base64             format: 'jpeg', // 输出图片类型             size: {width: 150, height: 200} // 输出图片的尺寸         }).then(function (resp) {             $('#item-img-output').attr('src', resp); // 将裁剪结果显示在页面上             $('#cropImagePop').modal('hide'); // 隐藏模态框         });     }); });