Adjust image inside canvas

Question

I have a page that allows you to insert an image inside the canvas element and works perfectly.

Now, what I need is a way to limit the positioning of the image within the canvas, not allowing it to be left with white spaces, regardless of the positioning of the image.

The image selection option is enabled. Repositioning is done using drag and drop.

I need something like this from link, but without having to zoom in to move the image.

Canvas

<canvas id="c" height="300" width="200"></canvas>

Imagery

<img id="imagem" src="images/teste.jpg">

JS

    var c = new fabric.Canvas('c');

        var imageSrc = "images/teste.jpg";

        fabric.Image.fromURL(imageSrc, function(img) {
            img.scaleToWidth(c.getWidth());
            img.scaleToHeight(c.getHeight());
            img.set('selectable', true);
            img.set('hasControls', false);
            c.add(img);
        });

Answer 1

To prevent the image from being inside the canvas, it is necessary to limit the placement of the object obj which contains the image. The top and left position cannot be greater than 0.

var canvas = window._canvas = new fabric.Canvas('canvas', {
    preserveObjectStacking: true
});

var imageObj = new Image(), path = 'http://i.imgur.com/tEeSJcr.jpg';

imageObj.src = path;

imageObj.onload = function () {
    var image = new fabric.Image(imageObj);

    canvas.setHeight(250);
    canvas.setWidth(250);
    image.set({
        id: 'img',
        left: 0,
        top: 0,
        selectable: true,
        hasBorders: false,
        hasControls: false,
        hasRotatingPoint: false
    });
    canvas.add(image);
};


canvas.on('object:moving', function (e) {
    var obj;
    obj = e.target;
    obj.setCoords();

    var boundingRect = obj.getBoundingRect();
    var zoom = canvas.getZoom();
    var viewportMatrix = canvas.viewportTransform;

    //there is a bug in fabric that causes bounding rects to not be transformed by viewport matrix
    //this code should compensate for the bug for now
    boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
    boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
    boundingRect.width /= zoom;
    boundingRect.height /= zoom;

    var canvasHeight = obj.canvas.height / zoom,
        canvasWidth = obj.canvas.width / zoom;

    if(boundingRect.top > 0){
        obj.top = 0;
    }

    if(boundingRect.left > 0){
        obj.left = 0;
    }

    if (boundingRect.top < canvasHeight - boundingRect.height){
        obj.top = canvasHeight - boundingRect.height;
    }

    if (boundingRect.left < canvasWidth - boundingRect.width){
        obj.left = canvasWidth - boundingRect.width;
    }

});

Answer 2

Increasing the resolution of the image should be avoided, so the image must be larger than the canvas. Then you need to check if the height is larger than the width to work with various image sizes.

<canvas id="c" height="600" width="600" style="border:1px solid #000"></canvas>

var c = new fabric.Canvas('c');

var imageSrc = "http://marketingdeconteudo.com/wp-content/uploads/2017/01/formatos-de-imagem-2.jpg";

var w = 600;
var h = 600;


fabric.Image.fromURL(imageSrc, function(img) {
  if (img.width > img.height) {
    img.scaleToWidth(w);
  }
  else if (img.height > img.width) {
    img.scaleToWidth(h);
  }
  else {
    img.scaleToWidth(w);
  }

  img.set('selectable', true);
  img.set('hasControls', false);
  c.add(img);
});