Canvas 转图片，用代码留下精彩瞬间

2023-12-28 13:36:45

从动态到静态：Canvas 转图片

Canvas 作为一种强大的 HTML5 元素，允许开发者创建交互式图形和动画。然而，有时我们需要将 Canvas 的动态内容转换为静态图片，以便轻松分享或长期保存。

实现 Canvas 转图片非常简单：

canvas.toDataURL('image/png');

此代码将 Canvas 转换为一个 PNG 数据 URL，然后您可以将其下载为图片。

透明背景的烦恼

默认情况下，Canvas 转 PNG 图片时，背景是透明的。对于某些设计可能不太理想，特别是当您希望图片具有固定的背景颜色时。

要自定义背景颜色，请在 toDataURL 方法中添加 backgroundColor 选项：

canvas.toDataURL('image/png', {backgroundColor: '#ffffff'});

您可以在 backgroundColor 选项中指定任何十六进制颜色代码，以创建自定义背景。

扩展合并下载

有时候，您可能希望将多个 Canvas 合并为一个图片进行下载。虽然 Canvas 没有内置合并功能，但我们可以使用 JavaScript 来实现它：

创建一个新的空白 Canvas，作为合并后的目标 Canvas。
循环遍历要合并的 Canvas，使用 drawImage 方法将其复制到目标 Canvas 中。
使用 toDataURL 方法将合并后的 Canvas 转换为图片。

以下是合并下载代码示例：

function mergeCanvas(canvases) {
  const mergedCanvas = document.createElement('canvas');
  mergedCanvas.width = canvase.reduce((a, b) => a.width + b.width, 0);
  mergedCanvas.height = canvase.reduce((a, b) => Math.max(a.height, b.height), 0);

  canvases.forEach(canvas => {
    mergedCanvas.drawImage(canvas, canvas.offsetLeft, canvas.offsetTop);
  });

  return mergedCanvas.toDataURL('image/png');
}