npm 中文文档

Fabric.js


undefined

A simple and powerful Javascript HTML5 canvas library.

Website
GOTCHAS
Contributing, Developing and More

🩺 🧪 CodeQL

Features


Out of the box interactions such as scale, move, rotate, skew, group...
Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
JPG, PNG, JSON and SVG i/o
Typed and modular
Unit tested

Supported Browsers/Environments


Context Supported Version Notes
:--- :--- :---
Firefox ✔️ modern version (tbd)
Safari ✔️ version >= 10.1
Opera ✔️ chromium based
Chrome ✔️ modern version (tbd)
Edge ✔️ chromium based
Edge Legacy ❌
IE11 ❌
Node.js ✔️ Node.js installation

Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.

Migrating to v6


v6 is a MAJOReffort including migrating to TS and es6, countless fixes, rewrites and features.Currently in beta, refer to #8299 for guidance.

  1. ``` shell
  2. $ npm install fabric@beta --save
  3. // or
  4. $ yarn add fabric@beta
  5. ```

Installation


  1. ``` shell
  2. $ npm install fabric --save
  3. // or
  4. $ yarn add fabric
  5. ```

Browser


See browser modules for using es6 imports in the browser or use a dedicated bundler.

Node.js


Fabric.js depends on node-canvas for a canvas implementation (HTMLCanvasElement replacement) and jsdom for a window implementation on node. This means that you may encounter node-canvas limitations and bugs.

Follow these instructions to get node-canvas up and running.

Quick Start


  1. ``` js
  2. // v6
  3. import { Canvas, Rect } from 'fabric'; // browser
  4. import { StaticCanvas, Rect } from 'fabric/node'; // node

  6. // v5
  7. import { fabric } from 'fabric';
  8. ```

Plain HTML
  1. ``` html
  2. <canvas id="canvas" width="300" height="300"></canvas>
  4. <script src="https://cdn.jsdelivr.net/npm/fabric"></script>
  5. <script>
  6.   const canvas = new fabric.Canvas('canvas');
  7.   const rect = new fabric.Rect({
  8.     top: 100,
  9.     left: 100,
  10.     width: 60,
  11.     height: 70,
  12.     fill: 'red',
  13.   });
  14.   canvas.add(rect);
  15. </script>
  16. ```

ReactJS
  1. ``` tsx
  2. import React, { useEffect, useRef } from 'react';
  3. import * as fabric from 'fabric'; // v6
  4. import { fabric } from 'fabric'; // v5

  6. export const FabricJSCanvas = () => {
  7.   const canvasEl = useRef<HTMLCanvasElement>(null);
  8.   useEffect(() => {
  9.     const options = { ... };
  10.     const canvas = new fabric.Canvas(canvasEl.current, options);
  11.     // make the fabric.Canvas instance available to your app
  12.     updateCanvasContext(canvas);
  13.     return () => {
  14.       updateCanvasContext(null);
  15.       canvas.dispose();
  16.     }
  17.   }, []);

  19.   return <canvas width="300" height="300" ref={canvasEl}/>;
  20. };
  21. ```

Node.js
  1. ``` js
  2. import http from 'http';
  3. import * as fabric from 'fabric/node'; // v6
  4. import { fabric } from 'fabric'; // v5

  6. const port = 8080;

  8. http
  9.   .createServer((req, res) => {
  10.     const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
  11.     const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
  12.     const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
  13.     canvas.add(rect, text);
  14.     canvas.renderAll();
  15.     if (req.url === '/download') {
  16.       res.setHeader('Content-Type', 'image/png');
  17.       res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
  18.       canvas.createPNGStream().pipe(res);
  19.     } else if (req.url === '/view') {
  20.       canvas.createPNGStream().pipe(res);
  21.     } else {
  22.       const imageData = canvas.toDataURL();
  23.       res.writeHead(200, '', { 'Content-Type': 'text/html' });
  24.       res.write(`<img src="${imageData}" />`);
  25.       res.end();
  26.     }
  27.   })
  28.   .listen(port, (err) => {
  29.     if (err) throw err;
  30.     console.log(
  31.       `> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
  32.     );
  33.   });
  34. ```

See our ready to use templates.

Other Solutions


Project Description Demo
:--- :--- :---
Three.js 3D graphics
PixiJS WebGL renderer
Konva Similar features ❌
Canvas2PDF PDF renderer
html-to-image HTML to image/canvas

More Resources


Demos on fabricjs.com
Fabric.js on Twitter
Fabric.js on CodeTriage
Fabric.js on Stack Overflow
Fabric.js on jsfiddle
Fabric.js on Codepen.io

Credits


kangax
asturur on Twitter
melchiar
ShaMan123
Ernest Delgado for the original idea of manipulating images on canvas
Maxim "hakunin" Chernyak for ideas, and help with various parts of the library throughout its life
Sergey Nisnevich for help with geometry logic
Stefan Kienzle for help with bugs, features, documentation, GitHub issues
Shutterstock for the time and resources invested in using and improving Fabric.js
and all the other contributors