如何让 'zoom' 和 'rotate' 与 Cropper.js 一起工作

Question

我正在使用 Cropper.JS 编辑图像。到目前为止一切顺利，我可以加载、裁剪和保存这些图像。

我无法让 'zoom' 和 'rotate' 的按钮正常工作。

*** 当我使用鼠标的滚轮时缩放确实有效

我已经尝试从主要发行版中粘贴代码并尝试从那里进行调整，但没有任何积极的结果。

HTML:

        <div class="btn-group">
          <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(0.1)">
              <span class="fa fa-search-plus"></span>
            </span>
          </button>
          <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(-0.1)">
              <span class="fa fa-search-minus"></span>
            </span>
          </button>
        </div>

         <div class="input-group input-group-sm">
            <label class="input-group-addon" for="dataRotate">Rotate</label>
            <input type="text" class="form-control" id="dataRotate" placeholder="rotate">
            <span class="input-group-addon">deg</span>
         </div>

JS：（我从 dist 粘贴的代码从以下行开始： var URL = window.URL || window.webkitURL; 并在该行结束： console.log("test"); 所有其他代码都对我有用。

<cfset imgname2 = "#getProd.ProductName#-midsize">

   <script>
    window.addEventListener('DOMContentLoaded', function () {
      var midsize = document.getElementById('avatar2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var image = document.getElementById('image2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var input = document.getElementById('input2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var $progress = $('.progress');
      var $progressBar = $('.progress-bar');
      var $alert = $('.alert');
      var $modal = $('#modal2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var cropper = null;


      $('[data-toggle="tooltip"]').tooltip();

      input.addEventListener('change', function (e) {
        var files = e.target.files;
        var done = function (url) {
          input.value = '';
          image.src = url;
          if(cropper)
          {
              cropper.destroy();
              cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,
              });
          }
          $alert.hide();
          $modal.modal('show');
        };
        var reader;
        var file;
        var url;


  var URL = window.URL || window.webkitURL;
  var container = document.querySelector('.img-container');

  var download = document.getElementById('download');       
  var actions = document.getElementById('actions');
  var dataX = document.getElementById('dataX');
  var dataY = document.getElementById('dataY');
  var dataHeight = document.getElementById('dataHeight');
  var dataWidth = document.getElementById('dataWidth');
  var dataRotate = document.getElementById('dataRotate');
  var dataScaleX = document.getElementById('dataScaleX');
  var dataScaleY = document.getElementById('dataScaleY');

  var options = {
    aspectRatio: 321 / 180,
    preview: '.img-preview',
    ready: function(e) {
      console.log(e.type);
    },
    cropstart: function(e) {
      console.log(e.type, e.detail.action);
    },
    cropmove: function(e) {
      console.log(e.type, e.detail.action);
    },
    cropend: function(e) {
      console.log(e.type, e.detail.action);
    },
    crop: function(e) {
      var data = e.detail;

      console.log(e.type);
      dataX.value = Math.round(data.x);
      dataY.value = Math.round(data.y);
      dataHeight.value = Math.round(data.height);
      dataWidth.value = Math.round(data.width);
      dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
      dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
      dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
    },
    zoom: function(e) {
      console.log(e.type, e.detail.ratio);
      console.log("test");
    }
  };

         if (files && files.length > 0) {
          file = files[0];
            $("#midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>").modal('hide');  <!-- close 1st window if new image selected to crop-->
          if (URL) {
            done(URL.createObjectURL(file));
          } else if (FileReader) {
            reader = new FileReader();
            reader.onload = function (e) {
              done(reader.result);
            };
            reader.readAsDataURL(file);
          }
        }
      });

      $modal.on('shown.bs.modal', function () {
          if(!cropper)
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
            });
      }).on('hidden.bs.modal', function () {
        if(cropper)
        {
            cropper.destroy();
            cropper = null;
        }        

      });

      document.getElementById('crop2-<cfoutput>#ProdPhotoID#</cfoutput>').addEventListener('click', function () {
        var initialmidsizeURL;
        var canvas;

        $modal.modal('hide');

        if (cropper) {
          canvas = cropper.getCroppedCanvas({
            width: 560,
            height: 460,
          });
          initialmidsizeURL = midsize.src;
          midsize.src = canvas.toDataURL();
          $progress.show();
          $alert.removeClass('alert-success alert-warning');
          canvas.toBlob(function (blob) {
            var formData = new FormData();

            formData.append('midsize', blob, 'midsize.jpg');
            formData.append('imageName', "<cfoutput>#imgname2#</cfoutput>");
            formData.append('prodID', "<cfoutput>#URL.prodid#</cfoutput>");
            formData.append('photoID', "<cfoutput>#ProdPhotoID#</cfoutput>"); 

            $.ajax('inc/_image_midsize_ajax.cfm', {
              method: 'POST',
              data: formData,      
              processData: false,
              contentType: false,

              xhr: function () {
                var xhr = new XMLHttpRequest();

                xhr.upload.onprogress = function (e) {
                  var percent = '0';
                  var percentage = '0%';

                  if (e.lengthComputable) {
                    percent = Math.round((e.loaded / e.total) * 100);
                    percentage = percent + '%';
                    $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                  }
                };

                return xhr;
              },

              success: function () {
                $alert.show().addClass('alert-success').text('Upload success');
              },

              error: function () {
                midsize.src = initialmidsizeURL;
                $alert.show().addClass('alert-warning').text('Upload error');
              },

              complete: function () {
                $progress.hide();
              },





            });
          });
        }
      });
    });
  </script>

正在尝试使用按钮进行滚动和旋转。

Answer 1

这对我有用（而且是一个野兽！）。将它张贴在这里以防它在将来帮助某人...

<div class="btn-group">
      <button
        id="ZoomInBtn"
        type="button"
        class="btn btn-primary"
        data-method="zoom"
        data-option="0.1"
        title="Zoom In"
      >
        <span
          class="docs-tooltip"
          data-toggle="tooltip"
          title="cropper.zoom(0.1)"
        >
          <span class="fa fa-search-plus">+</span>
        </span>
      </button>
      <button
        id="ZoomOutBtn"
        type="button"
        class="btn btn-primary"
        data-method="zoom"
        data-option="-0.1"
        title="Zoom Out"
      >
        <span
          class="docs-tooltip"
          data-toggle="tooltip"
          title="cropper.zoom(-0.1)"
        >
          <span class="fa fa-search-minus">-</span>
        </span>
      </button>
    </div>

    <div class="input-group input-group-sm">
      <label class="input-group-addon" for="dataRotate">Rotate</label>
      <input type="text" class="form-control" id="dataRotate" placeholder="rotate">
      <span class="input-group-addon">deg</span>
    </div>


     window.addEventListener('DOMContentLoaded', function () {
      var midsize = document.getElementById('avatar2-<cfoutput>#ProdPhotoID# 
   </cfoutput>');
      var image = document.getElementById('image2-<cfoutput>#ProdPhotoID# 
   </cfoutput>');
      var input = document.getElementById('input2-<cfoutput>#ProdPhotoID# 
   </cfoutput>');
      var $progress = $('.progress');
      var $progressBar = $('.progress-bar');
      var $alert = $('.alert');
      var $modal = $('#modal2-<cfoutput>#ProdPhotoID#</cfoutput>');
      var cropper = null;


      $('[data-toggle="tooltip"]').tooltip();

      input.addEventListener('change', function (e) {
        var files = e.target.files;
        var done = function (url) {
          input.value = '';
          image.src = url;
          if(cropper)
          {
              cropper.destroy();
              cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,

    const ZIBtn = document.getElementById('ZoomInBtn');
    const ZOBtn = document.getElementById('ZoomOutBtn');

              });
          }
          $alert.hide();
          $modal.modal('show');
        };
        var reader;
        var file;
        var url;


     var URL = window.URL || window.webkitURL;
     var container = document.querySelector('.img-container');

     var download = document.getElementById('download');        
     var actions = document.getElementById('actions');
     var dataX = document.getElementById('dataX');
     var dataY = document.getElementById('dataY');
     var dataHeight = document.getElementById('dataHeight');
     var dataWidth = document.getElementById('dataWidth');
     var dataRotate = document.getElementById('dataRotate');
     var dataScaleX = document.getElementById('dataScaleX');
     var dataScaleY = document.getElementById('dataScaleY');

     var options = {
     aspectRatio: 321 / 180,
     preview: '.img-preview',
     ready: function(e) {
      console.log(e.type);
    },
    cropstart: function(e) {

        // Change the zoom: function(e) {} in var options as below

    zoom: function(e) {
        // console.log(e.type, e.detail.ratio);
        if (e.target.id === 'ZoomInBtn') {
          cropper.zoom(0.1);
        }
        if (e.target.id === 'ZoomOutBtn') {
          cropper.zoom(-0.1);
        }
      }



      console.log(e.type, e.detail.action);
    },
    cropmove: function(e) {
      console.log(e.type, e.detail.action);
    },

    ZIBtn.onclick = options.zoom;
    ZOBtn.onclick = options.zoom; 

    cropend: function(e) {
      console.log(e.type, e.detail.action);
    },
    crop: function(e) {
      var data = e.detail;

      console.log(e.type);
      dataX.value = Math.round(data.x);
      dataY.value = Math.round(data.y);
      dataHeight.value = Math.round(data.height);
      dataWidth.value = Math.round(data.width);
      dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
      dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
      dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
    },
    zoom: function(e) {
      console.log(e.type, e.detail.ratio);
      console.log("test");
    }
  };



        if (files && files.length > 0) {
          file = files[0];
            $("#midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>").modal('hide');  <!-- close 1st window if new image selected to crop-->
          if (URL) {
            done(URL.createObjectURL(file));
          } else if (FileReader) {
            reader = new FileReader();
            reader.onload = function (e) {
              done(reader.result);
            };
            reader.readAsDataURL(file);
          }
        }
      });

      $modal.on('shown.bs.modal', function () {
          if(!cropper)
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
            });
      }).on('hidden.bs.modal', function () {
        if(cropper)
        {
            cropper.destroy();
            cropper = null;
        }        

      });

如何让 'zoom' 和 'rotate' 与 Cropper.js 一起工作

How to get 'zoom' and 'rotate' working with Cropper.js

javascript

jquery

mvvm

cropperjs