CODEWITHSUNDEEP
javascripthtmlcanvasfabricjs
Larm
Larm

Reputation: 187

Can't get overlay to resize fabric.js?

I've been able to get the canvas to resize, and also include touch events. But for some reason, I can't get the overlay image to fill the canvas.

I'm using the recommended code from fabric.js

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    width: width,
    height: height,
    // Needed to position overlayImage at 0/0
    originX: 'left',
    originY: 'top'
  });

My Fiddle has a fair bit of code, as I'm not sure if it's the resizer or touch events that might be causing this issue.

Upvotes: 0

Views: 2294

Answers (1)

shkaper
shkaper

Reputation: 4988

The problem in your fiddle stems from the fact that in Fabric.js, setting width and height don't scale an image to the given values but rather set the dimensions of the fabric.Image container. What you need to do is call canvas.overlayImage.scaleToWidth(width) (or .scaleToHeight(height)) in the setOverlayImage()'s callback, so that the image would actually be scaled to cover the whole canvas:

//Image Edit
var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true
});

canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerWidth);
fabric.Image.fromURL("https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg", function(img) {
  img.scale(0.5).set({
    left: 150,
    top: 150,
    angle: 0
  });
  canvas.add(img).setActiveObject(img);
});

var info = document.getElementById('info');




function resize() {
  var canvasSizer = document.getElementById("imageEditor");
  var canvasScaleFactor = canvasSizer.offsetWidth / 525;
  var width = canvasSizer.offsetWidth;
  var height = canvasSizer.offsetHeight;
  var ratio = canvas.getWidth() / canvas.getHeight();
  if ((width / height) > ratio) {
    width = height * ratio;
  } else {
    height = width / ratio;
  }
  var scale = width / canvas.getWidth();
  var zoom = canvas.getZoom();
  zoom *= scale;
  canvas.setDimensions({
    width: width,
    height: height
  });
  canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0])
  canvas.setOverlayImage('https://i.imgur.com/1CURvP5.png', function() {
    canvas.overlayImage && canvas.overlayImage.scaleToWidth(width)
    canvas.renderAll()
  }, {
    // Needed to position overlayImage at 0/0
    originX: 'left',
    originY: 'top'
  });
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);

var textObj = new fabric.IText("Test Text", {
  fontSize: 22,
  top: 362.5,
  left: 262.5,
  hasControls: true,
  fontWeight: 'bold',
  fontFamily: 'Montserrat',
  fontStyle: 'normal',
  centeredrotation: true,
  originX: 'center',
  originY: 'center'
});
canvas.add(textObj);
canvas.renderAll();

canvas.on({
  'touch:gesture': function() {
    var text = document.createTextNode(' Gesture ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:drag': function() {
    var text = document.createTextNode(' Dragging ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:orientation': function() {
    var text = document.createTextNode(' Orientation ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:shake': function() {
    var text = document.createTextNode(' Shaking ');
    info.insertBefore(text, info.firstChild);
  },
  'touch:longpress': function() {
    var text = document.createTextNode(' Longpress ');
    info.insertBefore(text, info.firstChild);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.js"></script>


<div id="imageEditor">
  <div class="canvas-container">
    <canvas id="c"></canvas>
  </div>
</div>

(I had to re-upload the jail_cell_bars.png image elsewhere because the original hosting was not cooperating)

Upvotes: 1

Related Questions