Jcrop 在预览前检查原始图像尺寸

Posted 2023-02-25

【中文标题】Jcrop 在预览前检查原始图像尺寸

【英文标题】：Jcrop check the original image dimensions before preview

【发布时间】：2018-03-16 21:38:35

【问题描述】：

如何在初始化预览前确定图片的尺寸，只有图片宽度超过200px才开始裁剪？

这里是原始JS：

$('#my_file').on('change', function() 
    var file_name = $(this).val();
    if(file_name.length > 0) 
      addJcrop(this);
    
);

var addJcrop = function(input) 
    if ($('#image_prev').data('Jcrop')) 
      $('#image_prev').data('Jcrop').destroy();
    

    // this will add the src in image_prev as uploaded
    if (input.files && input.files[0]) 
      var reader = new FileReader();
      reader.onload = function (e) 
        $("#image_prev").attr('src', e.target.result);
        var box_width = $('#form-photo').width();
        $('#image_prev').Jcrop(
          setSelect: [ 175, 100, 400, 300 ],
          aspectRatio: 1,
          keySupport: false,
          boxWidth: box_width
          ,function()
          var jcrop_api = this;
          thumbnail = this.initComponent('Thumbnailer',  width: 326, height: 326 );
        );
      
      reader.readAsDataURL(input.files[0]);
    

此处的清洁示例：https://jsfiddle.net/5dykm7qc/23/

【参考方案1】：

好的，如果我理解正确，您想在开始裁剪之前检查图像尺寸。

首先，我要说我不是一个经验丰富的程序员，如果有错请见谅！

您需要创建一个新图像来检查尺寸。

$(document).ready(function()
     $('#my_file').on('change', function()
       reader = new FileReader();
       file = document.getElementById('my_file').files[0]
       if (file.type.match('image/*')) 
         reader.readAsDataURL(file);
         reader.onload = function(e) 
           image = new Image();
           image.src = e.target.result;
           image.onload = function() 
             if (image.width > 200) 
               $("#image-prev").Jcrop(
                 * add options *
               );
              
           
         
       
     );
   );