上传图片剪裁

最新推荐文章于 2024-06-06 23:38:32 发布

原创最新推荐文章于 2024-06-06 23:38:32 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一款基于jQuery的图片裁剪插件的具体配置与使用方法，包括引入必要的资源文件、HTML结构设置、裁剪功能实现等。该插件支持多种选项调整，如裁剪框拖动、图片旋转等，适用于网页上的图片编辑需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引包

<div class="container" style="width:95%">
    <div class="row">
      <div class="col-1">
        <div class="img-container">
          <img src="resources/common/images/default.jpg" alt="Picture" id="clipZp">
        </div>
      </div>
      <div class="col-2">
        <div class="docs-preview clearfix">
          <div class="img-preview preview-lg" style="margin-left:35px"></div>
        </div>
      </div>
    </div>
    <div class="row" style="padding-left:15px">
        <span class="file">选择照片<input id="inputImage" type="file" accept="image/gif,image/png,image/jpeg,image/jpg,image/bmp" onchange="openFile(event)"></span>
        <span class="clipBtn" data-method="setDragMode" style="background-color:rgb(51, 122, 183)">拖动</span>
        <span class="clipBtn" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">保存</span>
      </div>
    </div>

方法

$(function () {
        // -------------------------------------------------------------------------
        (function () {
          var $image =$('.img-container > img'),
              $dataX = $('#dataX'),
              $dataY = $('#dataY'),
              $dataHeight =$('#dataHeight'),
              $dataWidth = $('#dataWidth'),
              $dataRotate =$('#dataRotate'),
              options = {
              // strict: false,                //在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
              // responsive: false,            //是否在窗口尺寸改变的时候重置cropper。
              // checkImageOrigin: false       //默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。

              // modal: false,                 //是否在剪裁框上显示黑色的模态窗口
              // guides: false,                //是否在剪裁框上显示虚线
              // highlight: false,             //是否在剪裁框上显示白色的模态窗口
              // background: false,            //是否在容器上显示网格背景

              // autoCrop: false,              //是否在初始化时允许自动剪裁图片
              // autoCropArea: 0.5,            //0-1之间的数值，定义自动剪裁区域的大小
              // dragCrop: false,              //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
              // movable: false,               //是否允许移动剪裁框
              // resizable: false,             //是否允许改变剪裁框的大小
              // rotatable: false,             //是否允许旋转图片
              // zoomable: false,              //是否允许放大缩小图片
              // touchDragZoom: false,         //是否允许通过触摸移动来缩放图片
              // mouseWheelZoom: false,        //是否允许通过鼠标滚轮来缩放图片

              // minCanvasWidth: 320,          //canvas 的最小宽度（image wrapper）
              // minCanvasHeight: 180,         //canvas 的最小高度（image wrapper）
              // minContainerWidth: 320,       //容器的最小宽度
              // minContainerHeight: 180,      //容器的最小高度

              // build: null,                  //build.cropper事件的简写方式
              // built: null,                  //built.cropper事件的简写方式
              // dragstart: null,              //dragstart.cropper事件的简写方式
              // dragmove: null,               //dragmove.cropper事件的简写方式
              // dragend: null,                //dragend.cropper事件的简写方式
              // zoomin: null,                 //zoomin.cropper事件的简写方式
              // zoomout: null,                //zoomout.cropper事件的简写方式
                dragCrop : false,
                resizable : false,
                aspectRatio : 16 / 19,
                preview: '.img-preview',
                crop: function (data) {
                  $dataX.val(Math.round(data.x));
                  $dataY.val(Math.round(data.y));
                  $dataHeight.val(Math.round(data.height));
                  $dataWidth.val(Math.round(data.width));
                  $dataRotate.val(Math.round(data.rotate));
                }
              };

          $image.on({}).cropper(options);
          $(".clipBtn").click('[data-method]',function(){
            var data = $(this).data()
            result = $image.cropper(data.method, data.option);//剪切画布
            if (data.method === 'getCroppedCanvas') {
                imgBase=result.toDataURL('image/jpeg');
            //    $("#getZp").prop("src","");
              // var output = document.getElementById("getZp");
                //output.src = imgBase;
              }

          });

        }());