Question

我输入了网址，并预览了＆＃39;按钮。当我点击预览＆＃39;它会在提交＆＃39;之前插入此网址中的图片。按钮。

  $('#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);
  });

现在我想为此图片添加cropper插件。（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);
});

添加裁剪器功能以动态创建图像

1 个答案: