JQuery 裁剪器插件：裁剪图像的大小大于实际裁剪大小答案

【问题标题】：JQuery cropper plugin : size of the cropped image is larger than the actual cropped sizeJQuery 裁剪器插件：裁剪图像的大小大于实际裁剪大小
【发布时间】：2017-01-17 06:47:40
【问题描述】：

我正在尝试使用JQuery cropper plugin 实现裁剪图像上传系统，但我在裁剪图像部分遇到困难

问题是

裁剪后的图片尺寸大于实际裁剪后的尺寸

HTML

    //load the image for crop
    <div class="img-container">
        <img id="image" src="latest.jpg">
     </div>
      //load the cropped image after cropping
      <img id="db-image" />
      <input type="button" name="" id="getimage" value="getimage"/>

Javascript

//init the cropper plugin
 $('#image').cropper({
        aspectRatio: 16 / 9,
        crop: function(e) {
        },
        built: function() {
        }
    });

//load the cropped image into img when click on the button

    $('#getimage').click(function(){

             //get the cropped image as blob
            $('#image').cropper('getCroppedCanvas').toBlob(function(blob){
               console.log(blob);

               //convert blob to base64 string
                var reader = new window.FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    base64data = reader.result;
                    //display cropped image
                    $('#db-image').attr('src',base64data);

                }
        })
      })

js fiddle

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

你可以这样做（这是我自己的代码，只是理解这个概念）：

var $image = $('#jquery_cropper_image');
var cropper = $image.data('cropper');

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`

        cropper.getCroppedCanvas({
          width: 160,
          height: 90,
          minWidth: 500,
          minHeight: 500,
          maxWidth: 4096,
          maxHeight: 4096,
          fillColor: '#fff',
          imageSmoothingEnabled: false,
          imageSmoothingQuality: 'high',
        }).toBlob((blob) => {
          var formData = new FormData();
          //var image_name = document.getElementById('jquery_cropper_image').src;
          var image_name = $('#jquery_cropper_image').attr('src');
          var image_name = 'cropped_'+image_name.replace('images/','');

          formData.append('croppedImage', blob, image_name);

          // Use `jQuery.ajax` method
          $.ajax('upload_image.php', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response){

                if(response == 'cropped_upload_success'){
                    console.log('cropped_upload_success');
                    document.getElementById('success_crop_save_notice').innerText = 'Success!';
                }

            },
            error() {
              console.log('Upload error');
            },
          });
        });

看到我在“getCroppedCanvas”函数中传递了一些参数，这将解决大于裁剪尺寸的图像存储到服务器的问题。

此外，您还可以在选项变量中为“裁剪框”设置最小高度和宽度：

 var options = {
    aspectRatio: 1 / 1,
    viewMode: 2,
    minCropBoxWidth: 500,
    minCropBoxHeight: 500,
    preview: '.img-preview',
    crop: function (e) {
      $dataX.val(Math.round(e.detail.x));
      $dataY.val(Math.round(e.detail.y));
      $dataHeight.val(Math.round(e.detail.height));
      $dataWidth.val(Math.round(e.detail.width));
      $dataRotate.val(e.detail.rotate);
      $dataScaleX.val(e.detail.scaleX);
      $dataScaleY.val(e.detail.scaleY);
    }
  };

【讨论】：