canvans 实现图片编辑

Canvas 可以通过 JavaScript 操作来实现图片编辑，以下是一个基本的示例代码：

<!-- HTML -->
<canvas id="canvas"></canvas>

<!-- JavaScript -->
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 在 canvas 上进行图片编辑操作
};

通过 `ctx.drawImage()` 方法将图片绘制到 Canvas 上后，可以使用其他 Canvas API 方法来进行编辑操作，例如绘制图形、添加文字等。编辑完成后可以通过 Canvas 的 `toDataURL()` 方法将编辑后的图片转换为 Base64 编码的字符串，或者使用 `toBlob()` 方法将其转换为 Blob 对象，然后进行保存或上传等操作。

相关问题

canvans 实现给图片画矩形 箭头

可以使用 Canvas 的绘制 API 来实现给图片画矩形和箭头的操作。以下是一个基本的示例代码：

<!-- HTML -->
<canvas id="canvas"></canvas>

<!-- JavaScript -->
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 绘制矩形
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.rect(50, 50, 200, 100);
  ctx.stroke();

  // 绘制箭头
  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 5;
  ctx.moveTo(100, 200);
  ctx.lineTo(200, 200);
  ctx.lineTo(200, 150);
  ctx.stroke();
};

其中，`ctx.rect()` 方法用于绘制矩形，接受四个参数分别为矩形左上角的 x 坐标、y 坐标、宽度和高度。而绘制箭头需要使用 `ctx.moveTo()` 和 `ctx.lineTo()` 方法来绘制直线，并使用三角形来表示箭头。

canvans 实现给图片画矩形 箭头 多边形 全屏 撤销 反撤销

以下是一个基本的 Canvas 图片编辑工具的示例代码，包含绘制矩形、箭头、多边形、全屏、撤销和反撤销等功能：

<!-- HTML -->
<canvas id="canvas"></canvas>
<button id="fullscreen-btn">全屏</button>
<button id="undo-btn">撤销</button>
<button id="redo-btn">反撤销</button>
<button id="rect-btn">矩形</button>
<button id="arrow-btn">箭头</button>
<button id="polygon-btn">多边形</button>

<!-- CSS -->
#canvas {
  border: 1px solid #ccc;
}

#fullscreen-btn {
  margin-right: 10px;
}

#undo-btn,
#redo-btn,
#rect-btn,
#arrow-btn,
#polygon-btn {
  margin-bottom: 10px;
}

<!-- JavaScript -->
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startX, startY;
let points = [];
let undoStack = [];
let redoStack = [];

// 绘制矩形
function drawRect(x, y, width, height) {
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.rect(x, y, width, height);
  ctx.stroke();
}

// 绘制箭头
function drawArrow(startX, startY, endX, endY) {
  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 5;
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.lineTo(endX - 15, endY + 10);
  ctx.moveTo(endX, endY);
  ctx.lineTo(endX - 15, endY - 10);
  ctx.stroke();
}

// 绘制多边形
function drawPolygon(points) {
  ctx.beginPath();
  ctx.strokeStyle = 'green';
  ctx.lineWidth = 5;
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.closePath();
  ctx.stroke();
}

// 保存当前画布状态
function saveState() {
  undoStack.push(canvas.toDataURL());
}

// 恢复上一个画布状态
function undo() {
  if (undoStack.length > 0) {
    redoStack.push(canvas.toDataURL());
    let state = undoStack.pop();
    let img = new Image();
    img.src = state;
    img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
    }
  }
}

// 恢复下一个画布状态
function redo() {
  if (redoStack.length > 0) {
    undoStack.push(canvas.toDataURL());
    let state = redoStack.pop();
    let img = new Image();
    img.src = state;
    img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
    }
  }
}

canvas.addEventListener('mousedown', function(e) {
  isDrawing = true;
  startX = e.clientX - canvas.offsetLeft;
  startY = e.clientY - canvas.offsetTop;
  saveState();
});

canvas.addEventListener('mousemove', function(e) {
  if (isDrawing) {
    let x = e.clientX - canvas.offsetLeft;
    let y = e.clientY - canvas.offsetTop;

    // 绘制矩形
    if (document.getElementById('rect-btn').checked) {
      let width = x - startX;
      let height = y - startY;
      drawRect(startX, startY, width, height);
    }

    // 绘制箭头
    if (document.getElementById('arrow-btn').checked) {
      drawArrow(startX, startY, x, y);
    }

    // 绘制多边形
    if (document.getElementById('polygon-btn').checked) {
      points.push({
        x: x,
        y: y
      });
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      drawPolygon(points);
    }
  }
});

canvas.addEventListener('mouseup', function(e) {
  isDrawing = false;

  if (document.getElementById('polygon-btn').checked) {
    points.push({
      x: e.clientX - canvas.offsetLeft,
      y: e.clientY - canvas.offsetTop
    });
    drawPolygon(points);
    points = [];
  }
});

document.getElementById('fullscreen-btn').addEventListener('click', function() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    canvas.requestFullscreen();
  }
});

document.getElementById('undo-btn').addEventListener('click', function() {
  undo();
});

document.getElementById('redo-btn').addEventListener('click', function() {
  redo();
});

其中，`drawRect()`、`drawArrow()` 和 `drawPolygon()` 分别用于绘制矩形、箭头和多边形，`saveState()`、`undo()` 和 `redo()` 分别用于保存画布状态和进行撤销和反撤销操作。可以通过给相应的按钮添加 `checked` 属性来选择要绘制的图形。