Jquery 如何约束可裁剪区域的宽度和高度以输出相同大小的图像？

你好-

我希望使用jQuery Cropper.js插件创建一个webform，其中有一个字段，用户可以上传图像，然后对其进行裁剪

我希望输出的图像始终为580 x 580

我想这样做，用户不能改变作物面积的大小。我希望它始终是580 x 580

我还看到，当我放大/缩小时，我想看到宽度和高度的变化

我还看到其他人说我可以在服务器上调整图像的大小，但是如果图像被裁剪并且非常小，那么我看不出这是如何工作的。放大图像将是一个问题

下面是我如何设置裁剪器的

jQuery( image ).cropper({
  preview: '.img-preview',
  aspectRatio: 1 / 1,
  responsive: true,
  restore: true,
  modal: true,
  guides: false,
  center: true,
  dragMode: 'crop',
  movable: true,
  ready: function (event) { 
    jQuery(this).cropper('setData', { 
      width:  580,
      height: 580
    });
  },
  crop: function(event) {
        jQuery('#height').val(Math.round(event.detail.height));
        jQuery('#width').val(Math.round(event.detail.width));
        jQuery('#x').val(Math.round(event.detail.x));
        jQuery('#y').val(Math.round(event.detail.y));
        jQuery('#angle').val(Math.round(event.detail.rotate)); 
  }
});

我还有其他的工作要做。我正在裁剪图像，将原始图像保存到服务器，裁剪图像，将裁剪后的图像转换为a Blob，然后将其发送到服务器，并让Imagick处理图像

---

提前谢谢

以下是我最终用于jquery.crapper的设置：

jQuery( image ).cropper({
  preview: '.img-preview',
  viewMode:3,
  aspectRatio: 1 / 1,
  strict: true,
  guides: false,
  dragMode: 'move',
  movable: true,
  highlight: true,
  dragCrop: false,
  cropBoxResizable: true,
  data: { width: 580, height: 580 },
  autoCropArea: 0,
  minWidth: 580,
  minHeight: 580,
  maxWidth: 2400,
  maxHeight: 2400,
  ready: function (event) {

     jQuery(this).cropper('setData', { 
       width:  580,
      height: 580
     });

  },
  crop: function(event) {
        jQuery('#height').val(Math.round(event.detail.height));
        jQuery('#width').val(Math.round(event.detail.width));
        jQuery('#x').val(Math.round(event.detail.x));
        jQuery('#y').val(Math.round(event.detail.y));
        jQuery('#angle').val(Math.round(event.detail.rotate));
        jQuery('#scalex').val(Math.round(event.detail.scaleX)); 
        jQuery('#scaley').val(Math.round(event.detail.scaleY)); 
  }
});

在“裁剪”按钮上，我必须添加这个选项，它将裁剪区域的大小设置为580x580。我用它向用户展示它的预览

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

  var croppedImageDataURL = image.cropper('getCroppedCanvas', {width:580, height:580}).toDataURL("image/jpg");
  result.append( jQuery('<img>').attr('src', croppedImageDataURL) );

});

$（'#btnCrop'）。单击（函数（）{
var croppedImageDataURL=image.croper（'getCroppedCanvas'，{width:580，height:580}）；
result.append（jQuery（'
我还有一个函数用于appendFileandSubmit（）操作。我在那里添加了相同的函数，以将图像缩小到580x580

// click function to handle the image
function appendFileAndSubmit(){

  var form = document.getElementById("cropperform");

  var croppedImageDataURL = image.cropper('getCroppedCanvas', {width:580, height:580}).toDataURL("image/jpg");

  // Split the base64 string in data and contentType
  var block = croppedImageDataURL.split(";");
  // Get the content type of the image
  var contentType = block[0].split(":")[1];// In this case "image/gif"
  // get the real base64 content of the file
  var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

  // Convert it to a blob to upload
  var blob = b64toBlob(realData, contentType);

  // Create a FormData and append the file with "image" as parameter name
  var formDataToUpload = new FormData(form);
  formDataToUpload.append("image", blob);



  /**
 * The following code should send 2 post parameters:
 * filename: providen by the text input
 * image: a file, dinamically added from a base64 string using javascript
 *
 * Is up to you how to receive the file in the Server side.
 */
  jQuery.ajax({
      url:"finish-image.php",
      data: formDataToUpload,// Add as Data the Previously create formData
      type:"POST",
      contentType:false,
      processData:false,
      cache:false,
      dataType:"json", // Change this according to your response from the server.
      error:function(err){
          console.error(err);
      },
      success:function(data){
          console.log(data);

          jQuery('#FinalStep .outputMsg').html('<p>Success!</p>');
      },
      complete:function(){
          console.log("Request finished.");
      }
  });

}

//单击函数处理图像
函数appendFileAndSubmit（）{
var form=document.getElementById（“cropperform”）；
var croppedImageDataURL=image.croper（'getCroppedCanvas'，{width:580，height:580}）；
//在data和contentType中拆分base64字符串
var block=cropeImage数据URL.split（“；”）；
//获取图像的内容类型
var contentType=block[0]。拆分（“：”[1]；//在本例中为“image/gif”
//获取文件的真实base64内容
var realData=block[1]。拆分（“，”[1]；//在本例中为“R0lGODlhPQBEAPeoAJosM…”
//将其转换为要上载的blob
var blob=b64toBlob（realData，contentType）；
//创建一个FormData并将“image”作为参数名附加到文件中
var formDataToUpload=新表单数据（表单）；
formDataToUpload.append（“图像”，blob）；
/**
*以下代码应发送2个post参数：
*文件名：providen由文本输入
*图像：一个文件，使用javascript从base64字符串中以数字方式添加
*
*由您决定如何在服务器端接收文件。
*/
jQuery.ajax({
url:“finish image.php”，
data:formDataToUpload，//将先前创建的formData添加为数据
类型：“POST”，
contentType:false，
processData:false，
cache:false，
数据类型：“json”，//根据服务器的响应进行更改。
错误：函数（err）{
控制台错误（err）；
},
成功：功能（数据）{
控制台日志（数据）；
jQuery（'#FinalStep.outputMsg'）.html（'Success！
'）；
},
完成：函数（）{
log（“请求完成”）；
}
});
}

这会将580x580处的图像提交到脚本进行处理。
是否要阻止用户调整裁剪区域的大小？您可能会发现该选项很有用。我认为这可能会起作用，只需始终将框设置为580x580，但我看到的是，当我放大和缩小时，它会改变宽度和高度。我不希望这样做，因为e然后如果有人放大以进行紧密裁剪，则图像将非常小。我只需要580x580个正方形。我将再次尝试cropBoxResizable，我想我以前也尝试过。我发现了这一点，后来觉得自己非常愚蠢。我将发布此问题的快速答案。这其实非常简单。