为动态创建的图像添加裁剪功能

Question

我输入了网址和“预览”按钮。 当我单击“预览”时，它会在“提交”按钮之前从该 URL 插入图像。

  $('#preview').click(function() {
    var image_url = $('#event_remote_flyer_url').val();
    var image_tag = $('<img class="preview">');
    image_tag.attr('src',image_url)
    $('input[name="commit"]').before(image_tag);
  });

现在我想为这张图片添加裁剪器插件。 (https://github.com/fengyuanchen/cropper)

文档说我应该这样使用它：

$('img.preview').cropper({
  aspectRatio: 16 / 9,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

它不起作用。据我了解，javascript 不会等待此裁剪器功能，而是在尚未插入 img.preview 时运行它。我该如何解决这个问题？

Answer 1

您需要在创建img.preview 元素时附上它，并且您的理解是正确的。

$('#preview').click(function() {
    var image_url = $('#event_remote_flyer_url').val();
    var image_tag = $('<img class="preview">');
    image_tag.attr('src', image_url)
        //Atach Cropper
    image_tag.cropper({
        aspectRatio: 16 / 9,
        crop: function(e) {}
    });
    //Append
    $('input[name="commit"]').before(image_tag);
});