JSFiddle - React, Tailwind, and code Playground

by hellatan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<div class="main-img" style="position: absolute; top: 400px">
    <img width="400" height="300" src="http://1.bp.blogspot.com/-N2fSe2JF0rg/T-vAeJcx4tI/AAAAAAAAErU/bOy8ya936xA/s1600/Tiger+3D+Wallpapers.jpg" />
</div>
<div class="canvas-wrapper">
    <canvas id="zoom"></canvas>
</div>

JavaScript

'use strict';

var imageRatio = function createImageRatioSize(maxW, maxH, imgW, imgH) {
    var ratio = imgH / imgW;
    if (imgW >= maxW && ratio <= 1){
        imgW = maxW;
        imgH = imgW * ratio;
    } else if(imgH >= maxH){
        imgH = maxH;
        imgW = imgH / ratio;
    } else if (ratio !== 1) {
        if (imgW > imgH) {
            imgW = maxW;
            imgH = imgW * ratio;
        } else {
            imgH = maxH;
            imgW = imgH / ratio;
        }
    }

    return {
        w: imgW,
        h: imgH
    };
}

var $canvasContainer = $('.canvas-wrapper');
var containerW = $canvasContainer.width();
var containerH = $canvasContainer.height();
var leftStart = containerW;
var canvas = new fabric.Canvas('zoom', {
    width: containerW,
    height: 500
});
var maxW = containerW;
var maxH = containerH;

var $img = $('.main-img > img');
var imgElement = $img[0];
var origH = $img.height();
var origW = $img.width();
var imageSize = imageRatio(maxW, maxH, origW, origH);
var imgW = imageSize.w;
var imgH = imageSize.h;
var initScaleH = imgH / origH;
var initScaleW = imgW / origW;
var originalZoomHandlerCenter;

var sliderBar = new fabric.Rect({
    fill: 'rgb(90, 90, 90)',
    opacity: 0.7,
    height: 4,
    width: 294,
    top: maxH - 50 + 3,
    left: (leftStart / 2) - 150 + 3,
    hasControls: false,
    hasBorders: false,
    hoverCursor: 'cursor',
    lockMovementY: true,
    lockMovementX: true
});

var zoomHandlerTop = sliderBar.top - (15 - (sliderBar.height / 2));
var zoomHandler = new fabric.Circle({
    fill: 'rgb(150, 150, 150)',
    opacity: 0.7,
    radius: 15,
    top: zoomHandlerTop,
    left: (leftStart / 2) - (sliderBar.width / 2) + 15,
    hasControls: false,
    hasBorders: false,
    lockMovementY: true,
    hoverCursor: 'pointer'
});

var imgInstance = new fabric.Image(imgElement, {
    left: (leftStart / 2) - (imgW / 2),
    top: 0,
    hasControls: false,
    centeredScaling: true,
    lockUniScaling: true,
   ...