Fabric.js is a JavaScript library for HTML5 canvas. Using Fabric.js one can create object/shapes on canvas. We’ll be incorporating canvas events to draw bounding box over webcam component.
Step1 — Install Fabric.js & react-html5-camera-photo
npm i fabric react-html5-camera-photo
Step2 — Create canvas & camera element
<Camera onTakePhoto={(uri) => {}} />
<canvas id="fabricEl" width="720" height="348"></canvas>
Step3 — Initialize fabric.Canvas
import React, { useEffect, useState } from "react";
import Camera from "react-html5-camera-photo";
import { fabric } from "fabric";
const [canvas, setCanvas] = useState("");
const initCanvas = () =>
new fabric.Canvas("fabricEl", {
selection: false,
stateful: true,
});
useEffect(() => {
setCanvas(initCanvas());
}, []);
Note that initCanvas function returns a fabric.Canvas object; invoked upon initial rendering of the DOM.
Step4 — Draw bounding box with canvas mouse events
Fabric supports a number of events to allow for interactivity and extensibility. In order to subscribe to events for a canvas we use the on method.
useEffect(() => {
if (canvas) {
var rectangle;
canvas.on("mouse:down", function (e) {
var pointer = canvas.getPointer(e.e);
rectangle = new fabric.Rect({
id: 1,
top: pointer.y,
left: pointer.x,
width: 0,
height: 0,
originX: "left",
originY: "top",
fill: "rgba(255,0,0,0.3)",
stroke: "rgba(255,0,0,1)",
strokeWidth: 2,
hasControls: true,
hasRotatingPoint: true,
hasBorders: true,
transparentCorners: false,
selectable: true,
cornerSize: 10,
cornerColor: "rgba(255,0,0,1)",
borderColor: "rgba(255,0,0,1)",
cornerStrokeColor: "rgba(255,0,0,1)",
cornerStyle: "rect",
});
canvas.add(rectangle);
});
}
}, [canvas]);
On mouse:down event of canvas we create a fabric.Rect object and add it to the canvas via canvas.add() method.
Final Code!
View the code on Gist.
Note on line 95, canvas.renderAll() re-renders both the upper and lower canvas layers on the DOM. The object:moving event is to restrict the bounding box rectangle within canvas boundary. The object:modified event calculates bounding box center x, center y, width and height.
Demo!
The post Fabric.js in React — Draw bounding box in webcam preview using canvas events. first appeared on Anlisha Maharjan.
Top comments (0)