Javascript 在单击标签时放置图像

我在画布上有一个图像放置功能。如果用户单击图像，它会将图像放到画布上。现在，我想做同样的点击标签。但由于标签上没有自然宽度和自然高度，所以它不起作用

对于下面的HTML，如果用户单击标记其工作，而不是单击（添加产品图像或添加二维码）

HTML 控制台输出 点击标签

klass{filters:Array（0），width:undefined，dirty:true，height:undefined，scaleX:NaN，…}

单击图像：

klass{filters:Array（0），width:100，dirty:true，height:100，scaleX:1，…}

---

问题是，当单击的元素是

img

时，

obj

将是

节点

，但当单击的元素是

span

时，它将是jQuery对象

您必须这样做，以便在两种情况下使用相同类型的对象：

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

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

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