Disable zoom for an image in ionic?

Question

I have an ionic template which contains an image file along with the canvas. The purpose for that was to draw something on image file by using pencil and erase it using eraser.

<ion-scroll delegate-handle="drawView" on-scroll="onScroll()" zooming="true" direction="xy" scrollbar-x="{{Zoom}}" scrollbar-y="{{Zoom}}" locking="{{Zoom}}" has-bouncing="false" min-zoom="1">

    <draw-image></draw-image>

</ion-scroll>

<div class="bar bar-footer bg-grey" data-tap-disabled="false">
     <div style='margin: 0 auto;display: inline-block;'>
        <button ng-click='getClickedIcon("pen")' class='button icon ion-edit pen bg-transparent'></button>
        <button ng-click='getClickedIcon("eraser")' class='button icon eraser bg-transparent' style='margin-left:0;border: none;'><i class="fa fa-eraser"></i></button>
        <button ng-click='getClickedIcon("clear")' class='button icon ion-close-round clear bg-transparent ' style='margin-left:0;'></button>

     </div>
</div>

Right now the issue is whenever the person draw something on canvas and zoom the image then canvas doesn't get resize as per image and the draw functionality fails.

So what i want that whenever user click on pencil the zoom functionality should be disable for the image but not for the ion-scroll and whenever the user deselect the pencil it should enable it.

I want to disable the image zoom not the ion-scroll zoom.

Answer 1

As the ion-scroll is handeling the zooming, it is disabling this or nothing. There is no image zooming happening in your app, just the zooming of the ion-scroll.

However you could use some javascript to set the zooming on and off.

document.getElementById("imagezoom").zooming="false";

When using this, make sure that you set the id of your ion-scroll to imagezoom