jquery - 如何限制可裁剪区域的宽度和高度以输出相同尺寸的图像?

标签 jquery cropperjs

美好的一天 -

我希望使用 jQuery Cropper.js 插件创建一个 Web 表单,其中包含用户可以上传图像然后裁剪图像的字段。

我希望输出的图像始终为 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)); 
  }
});

其他一切我都可以正常工作。我正在裁剪图像,将原始图像保存到服务器,裁剪图像,将裁剪后的图像转换为 Blob,然后将其发送到服务器并让 Imagick 处理图像。

提前致谢!

最佳答案

以下是我最终为 jquery.cropper 使用的设置:

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) );

});

我还有另一个用于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.");
      }
  });

}

这会将 580x580 的图像提交给脚本进行处理。

关于jquery - 如何限制可裁剪区域的宽度和高度以输出相同尺寸的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52011849/

相关文章:

php - 如何使用 php 获取服务器上存储的所有 session 值

JavaScript:使用decodeUri或unescape不会删除空格

jquery - 将 id 附加到 actionlink jquery 对话框

javascript - 在没有 Caman JS 的情况下为 Cropper JS 添加亮度和对比度?

javascript - 如何使用 webpacker 在 Rails 6 中包含cropper js 库

javascript - HTML Canvas 和内存使用

javascript - Angular - FileReader() 没有获得任何路径

javascript - 在突出显示的空行 Tinymce 中更改字体名称

jquery - 如何给cropper.js一个固定的高度和宽度来相应地裁剪

javascript - MomentJS 重置/重用 DOM 元素来显示新时间