不只截图，用Canvas实现图片任意编辑，海报设计不再难

2023-09-26 10:48:43

Canvas简介

Canvas 是 HTML5 中新增的标签，主要用于在网页实时生成图像，并且可以操作图像内容。Canvas 提供了丰富的 API，支持各种图像操作，如裁剪、旋转、缩放、添加水印等。

Canvas实现图片编辑

1. 图片裁剪

使用 Canvas 进行图片裁剪非常简单，只需要调用 drawImage() 方法，并指定裁剪区域即可。代码示例如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
  ctx.drawImage(image, 10, 10, 200, 200); //裁剪图片
};
image.src = 'image.jpg';

2. 图片旋转

要使用 Canvas 进行图片旋转，可以使用 rotate() 方法。代码示例如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
  ctx.save(); // 保存当前画布状态
  ctx.translate(100, 100); // 将画布原点移动到 (100, 100)
  ctx.rotate(45 * Math.PI / 180); // 旋转画布 45 度
  ctx.drawImage(image, -50, -50); // 将图片绘制到画布上
  ctx.restore(); // 还原画布状态
};
image.src = 'image.jpg';

3. 图片缩放

要使用 Canvas 进行图片缩放，可以使用 scale() 方法。代码示例如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
  ctx.scale(2, 2); // 将图片缩放两倍
  ctx.drawImage(image, 0, 0); // 将图片绘制到画布上
};
image.src = 'image.jpg';

4. 图片添加水印

要使用 Canvas 为图片添加水印，可以使用 fillText() 方法。代码示例如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0); // 将图片绘制到画布上

  ctx.font = 'bold 20px Arial'; // 设置字体
  ctx.fillStyle = 'red'; // 设置字体颜色
  ctx.fillText('水印', 10, 20); // 将水印绘制到画布上
};
image.src = 'image.jpg';

Canvas保存图片

将 Canvas 中的图片保存为本地文件非常简单，只需要使用 toDataURL() 方法即可。代码示例如下：

const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL('image/png'); // 将 Canvas 中的图片转换为 PNG 格式的 Base64 字符串

// 将 Base64 字符串保存为本地文件
const link = document.createElement('a');
link.href = dataURL;
link.download = 'image.png';
link.click();