javascript - 单击标签时放置图像

Question

我在 Canvas 中有一个图像放置功能。如果用户单击图像，则会将图像拖放到 Canvas 上。现在，我想在单击标签时执行相同的操作。但由于标签没有naturalWidth和naturalHeight，所以它不起作用。

对于下面的 HTML，如果用户单击 标记，则其工作正常，但单击(添加产品图像或添加二维码)则不起作用。

HTML

<ul class="dropdown-menu drop-bwn-icon image-parent" role="menu">
    <li class="img_holder">
        <img class="control-label image_drop_class image_drop drag_item canvas-img" data-value="http://localhost/lynkus/uploads/userprofile/image_n.png" data-type="image" width="30" data-width="100" src="http://localhost/lynkus/uploads/userprofile/image_n.png" data-image-name="image_1" draggable="true" alt="verified_image" data-action="image">
        <span class="images_title image_drop_class" data-action="span">Add Product Images</span>
    </li>

    <li class="img_holder">
        <img class="control-label image_drop_class image_drop drag_item" data-value="http://localhost/lynkus/uploads/userprofile/qr-code.png" data-type="image" width="30" data-width="260" src="http://localhost/lynkus/uploads/userprofile/qr-code.png" data-image-name="qr_code" draggable="true" alt="verified_image" data-action="image">

        <span class="images_title image_drop_class" data-action="span">Add QR Code</span>
    </li>                               
</ul>

JQuery

/* On click place image on canvas */
    $('.image_drop_class').click(function(){
        var obj = this;//document.querySelector('.image_drop');
        if($(obj).attr('data-action')=='span') // Owverwrite the object
        {
            var obj = $(this).parent().find('img:first');
        }
        var t_width = $(obj).attr('data-width');
        var setImageWidth = t_width;
        var setImageHeight = 100;
        var image_url = $(obj).attr('data-value');
        var image_id = $(obj).attr('data-image-name');
        var new_image = new fabric.Image(obj, {
            width: obj.naturalWidth,
            height: obj.naturalHeight,
            scaleX: setImageWidth/obj.naturalWidth,        
            scaleY: setImageHeight/obj.naturalHeight,
            left: 50,
            top: 50,
            id: image_id
        });
        console.log(new_image);
        canvas.add(new_image);
        canvas.renderAll();
    });

控制台输出

点击标签

klass {filters: Array(0), width: undefined, dirty: true, height: undefined, scaleX: NaN, …}

点击图像:

klass {filters: Array(0), width: 100, dirty: true, height: 100, scaleX: 1, …}

Answer 1

问题是，当点击的元素是 img 时，obj 将是 Node 但当点击的元素是 >span 它将是一个 jQuery 对象。

您必须执行类似的操作，以便在两种情况下都使用相同类型的对象:

if($(obj).attr('data-action')=='span'){
    var obj = $(this).parent().find('img').get(0);
}