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

【问题标题】：Jcrop check the original image dimensions before previewJcrop 在预览前检查原始图像尺寸
【发布时间】：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/

【问题讨论】：

标签： jquery jcrop

【解决方案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 *
               });
             } 
           }
         }
       }
     });
   });

【讨论】：