Fabric.js

一个简单而强大的Javascript HTML5 canvas库。

[网站][website]
[注意事项][gotchas]
贡献、开发及更多

[ cdnjs ][cdnjs] [][jsdelivr]

特性

开箱即用的交互功能，如缩放、移动、旋转、倾斜、分组等...
内置形状、控件、动画、图像滤镜、渐变、图案、画笔...
JPG、PNG、JSON和SVG输入/输出
类型化和模块化
单元测试

支持的浏览器/环境

环境	支持的版本	注释
Firefox	✔️	58
Safari	✔️	11
Opera	✔️	基于Chromium
Chrome	✔️	64
Edge	✔️	基于Chromium
Edge Legacy	❌
IE11	❌
Node.js	✔️	Node.js 安装

Fabric.js默认不使用转译，我们支持的浏览器版本由我们想要使用的canvas API级别和一些JS语法决定。虽然JS可以轻松转译，但canvas API无法转译。

安装

$ npm install fabric --save
// 或
$ yarn add fabric

浏览器

[ cdnjs ][cdnjs] [][jsdelivr]

请参阅[浏览器模块][mdn_es6]以了解如何在浏览器中使用es6导入，或使用专用的打包工具。

Node.js

Fabric.js依赖[node-canvas][node_canvas]作为canvas实现（HTMLCanvasElement的替代品）和[jsdom][jsdom]作为node上的window实现。这意味着你可能会遇到node-canvas的限制和[bugs][node_canvas_issues]。

按照这些[说明][node_canvas_install]来设置和运行node-canvas。

快速开始

// v6
import { Canvas, Rect } from 'fabric'; // 浏览器
import { StaticCanvas, Rect } from 'fabric/node'; // node

// v5
import { fabric } from 'fabric';

<details><summary>普通HTML</summary>

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

<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
  const canvas = new fabric.Canvas('canvas');
  const rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 60,
    height: 70,
    fill: 'red',
  });
  canvas.add(rect);
</script>

</details> <details><summary>ReactJS</summary>

import React, { useEffect, useRef } from 'react';
import * as fabric from 'fabric'; // v6
import { fabric } from 'fabric'; // v5

export const FabricJSCanvas = () => {
  const canvasEl = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const options = { ... };
    const canvas = new fabric.Canvas(canvasEl.current, options);
    // 使fabric.Canvas实例在你的应用中可用
    updateCanvasContext(canvas);
    return () => {
      updateCanvasContext(null);
      canvas.dispose();
    }
  }, []);

  return <canvas width="300" height="300" ref={canvasEl}/>;
};

</details> <details><summary>Node.js</summary>

import http from 'http';
import * as fabric from 'fabric/node'; // v6
import { fabric } from 'fabric'; // v5

const port = 8080;
http
  .createServer((req, res) => {
    const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
    const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
    const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
    canvas.add(rect, text);
    canvas.renderAll();
    if (req.url === '/download') {
      res.setHeader('Content-Type', 'image/png');
      res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
      canvas.createPNGStream().pipe(res);
    } else if (req.url === '/view') {
      canvas.createPNGStream().pipe(res);
    } else {
      const imageData = canvas.toDataURL();
      res.writeHead(200, '', { 'Content-Type': 'text/html' });
      res.write(`<img src="https://raw.githubusercontent.com/fabricjs/fabric.js/master/${imageData}" />`);
      res.end();
    }
  })
  .listen(port, (err) => {
    if (err) throw err;
    console.log(
      `> 已在 http://localhost:${port}、http://localhost:${port}/view 和 http://localhost:${port}/download 上准备就绪`,
    );
  });