'How to toggle borders and controls of Fabric.js objects during image save?
I would like to create a fabric.js canvas, move some content around and then save the canvas as image. It has been done before (Fabric.js demo Objects Bounding Rectangles, save), but how do I update borders and controls to hidden during saving of the image?
I tried this, but it's not removing the border. And how do I re-instate it after save?
canvas.forEachObject(function (obj) {
obj.hasBorders = false;
obj.hasControls = false;
});
canvas.discardActiveObject();
canvas.renderAll();
Solution 1:[1]
I found out that the border is manually created by the demo, so I just had to remove that part:
canvas.on('after:render', function () {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function (obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | bluepuma77 |
