Question

如果图像宽度超过200像素，如何在初始化预览之前确定图像的尺寸并开始裁剪图像？

这里是最初的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/

Answer 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 *
               });
             } 
           }
         }
       }
     });
   });

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

1 个答案: