使用fabric.js实现对图片涂鸦、文字编辑、平移缩放与保存功能

// 引入fabric.js库
const fabric = require('fabric').fabric;
const canvas = new fabric.Canvas('c');
 
// 加载图片
fabric.Image.fromURL('img/photo.jpg', (img) => {
  img.set({
    left: 100,
    top: 50,
    width: 300,
    height: 400
  });
  canvas.add(img);
  canvas.setActiveObject(img);
});
 
// 绘制矩形
function addRect() {
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 50,
    height: 50,
    fill: 'blue'
  });
  canvas.add(rect);
  canvas.setActiveObject(rect);
}
 
// 绘制文字
function addText() {
  var text = new fabric.Text('Hello', {
    left: 200,
    top: 100,
    fontSize: 20
  });
  canvas.add(text);
  canvas.setActiveObject(text);
}
 
// 保存画布为JSON
function saveCanvas() {
  console.log(JSON.stringify(canvas));
}
 
// 实现平移、缩放和旋转功能
canvas.on('object:moving', function(e) {
  e.target.opacity = 0.5;
});
canvas.on('object:modified', function(e) {
  e.target.opacity = 1;
});
 
// 将画布的状态保存到JSON
function saveCanvasState() {
  const json = JSON.stringify(canvas);
  localStorage.setItem('canvasState', json);
}
 
// 从JSON加载画布状态
function loadCanvasState() {
  const json = localStorage.getItem('canvasState');
  if (json) {
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
  }
}
 
// 初始化加载画布状态
loadCanvasState();

这段代码示例展示了如何使用fabric.js创建一个基本的图片编辑界面，包括绘制图片、矩形、文字，以及实现平移、缩放、旋转和保存功能。同时，使用localStorage保存和加载画布状态。这个例子简洁且易于理解，适合初学者学习和模仿。