CODEWITHSUNDEEP
javascriptjqueryfabricjs
DS9
DS9

Reputation: 3033

Place image on click of label

I have one image drop functionality in canvas. In which if user clicks on image it drop the image on canvas. Now, i want to do same on click of label. But as label doesn't have naturalWidth & naturalHeight, it isn't working.

For below HTML, if user clicks on < img /> tag its working, but not on click of (Add Product Images or Add QR Code).

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

Console Output

on click of label

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

on click of image:

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

Upvotes: 0

Views: 449

Answers (1)

Titus
Titus

Reputation: 22484

The problem is that when the clicked element is a img, obj will be a Node but when the clicked element is a span it will be a jQuery object.

You'll have to do something like this so you are working with the same kind of object in both cases:

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

Upvotes: 1

Related Questions