Returning size images zoom in zoom out

Question

I want to zoom in and out of the section image with my fingers and then return to the original image size again.

Currently, after the image is enlarged, the image will not come back to the original.

The desired order list. 1. Zoom in and out of the image -> ok 2. Resize the image back to its original size. -> fail 3. Center the coordinates of the image -> fail

var canvas;	

var gMarginWidth = 0;
var gMarginHeight = 0;
var gImageWidth = 0;
var gRatio = 0;

$(document).ready(function() {
   canvas_result();
   });
   
function canvas_result(){
  
	   //canvas
    canvas = new fabric.Canvas('c', 
    		{
    			selection : false,
    	        controlsAboveOverlay:true,
    	        centeredScaling:true,
    	        allowTouchScrolling: false
    		}
    );
  
    gRatio = 0;
    gMarginWidth = 0;
    gMarginHeight = 0;

	function resizeCanvas(imageWidth) {
	    canvas.setHeight(window.innerHeight*0.5);
	    canvas.setWidth(imageWidth);
	    canvas.renderAll();
	}
  
  
	fabric.Image.fromURL("http://59.25.178.93:8080/homesys/rest/testservice/0/imgLoadAdm.do?fileId=HF201801221742200845&fileSn=2", function(img) {

		var xRatio = $('#canvasWrapper').width()/img.width;
		var yRatio = (window.innerHeight*0.5)/img.height;
		gRatio = xRatio < yRatio ? xRatio : yRatio;//길이에 맞게 조절할 배율
		
		gImageWidth = img.width * gRatio;
		gMarginWidth = ($('#canvasWrapper').width() - img.width * gRatio) / 2;
	
		gMarginHeight = (600- img.height * gRatio)/2;
		
		resizeCanvas($('#canvasWrapper').width());
		
		
		canvas.setBackgroundImage(img);
		canvas.setZoom(gRatio);//평면도 가로 길이가 canvas에 꽉 차도록 zoom
		canvas.renderAll();
		
    }); 	
	
	
 	//캔버스 마우스 클릭 이벤트
 	canvas.on({
 		'mouse:up': function(event) {
 			self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), 0.305);
 		},
 		
 		
 		//캔버스 터치 이벤트 확대, 축소
 		'touch:gesture': function(event) {
 		      
 			  // Handle zoom only if 2 fingers are touching the screen
 			  if (event.e.touches && event.e.touches.length == 2) {
 			    // Get event point
 			  
 				var point = new fabric.Point(event.self.x, event.self.y);
 				
 			    // Remember canvas scale at gesture start
 			    if (event.self.state == "start") {
 			      zoomStartScale = self.canvas.getZoom();
 			 
 			    }
 			   var delta = zoomStartScale * event.self.scale ;
			    // Zoom to pinch point
    		  // self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), delta);
 			  self.canvas.zoomToPoint(point, delta);
 	         }
    	 }
    });
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="card" style="background-color: #fff;">
  <label style="margin-bottom:5px; margin-top:25px;">
      <font size="3" style="margin-left: 10px">Zoom in/ out</font>
      <font id="clocks" style="margin-left: 10px" size="1"></font>
  </label>

  <hr class="style1" style="margin-bottom: 20px; margin-left: 30px; margin-right: 30px;  margin-top: 0px;">
      <div id="canvasWrapper">
           <canvas class="img-responsive img-rounded" id="c"></canvas>
      </div>
  </div>

snippet ok

https://jsfiddle.net/6kjL3xe4/6/

Answer 1

I solved the answer to my question.

The correct answer is console.log (self.canvas); Respectively. And the viewportTransform found there is my gem.

'mouse:up': function(event) { [zoomStartScale,0,0,zoomStartScale,0,0];
    },

    //캔버스 터치 이벤트 확대, 축소
    'touch:gesture': function(event) {

          // Handle zoom only if 2 fingers are touching the screen
          if (event.e.touches && event.e.touches.length == 2) {
            // Get event point

            var point = new fabric.Point(event.self.x, event.self.y);

            //point_x = -1 * event.self.x;
            //point_y = -1 * event.self.y;

            // Remember canvas scale at gesture start
            if (event.self.state == "start") {
              zoomStartScale = self.canvas.getZoom();

            }
           var delta = zoomStartScale * event.self.scale ;
            // Zoom to pinch point
          // self.canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), delta);
           self.canvas.zoomToPoint(point, delta);

         }
     }
});