js 将canvas生成图片保存,或直接保存一张图片的实现方法

1. 使用 canvas.toDataURL() 将 canvas 保存为 base64 编码的图片，然后通过一个链接或者表单向服务器提交该图片以保存。

首先，我们需要获取 canvas 元素的 2d 上下文对象，然后使用 ctx.drawImage() 函数绘制一些元素到 canvas 上。如果你需要保存整个 canvas，可以使用以下代码：

const canvas = document.querySelector('canvas'); // 获取 canvas 元素
const dataURL = canvas.toDataURL('image/png'); // 将 canvas 保存为 base64 编码的图片

该代码将返回一个 base64 编码的 data URL 字符串，我们可以使用它来展示图片或将图片提交到服务器进行保存。如果你需要将图片提交到服务器，可以使用以下示例代码：

const canvas = document.querySelector('canvas');
const dataURL = canvas.toDataURL('image/png');

// 使用 XMLHttpRequest 将图片提交到服务器保存
const xhr = new XMLHttpRequest();
xhr.open('POST', '/save');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify({
  dataURL,
}));

注意，这里我们将 dataURL 作为一个 json 对象通过 POST 方法提交到了服务器；服务器需要解析 json 并将其中的 dataURL 保存为文件即可。

1. 将一个 HTML 元素保存为图片，使用 canvas 的 drawImage() 函数来绘制该元素并保存。

这里我们需要创建一个空白的 canvas 元素，然后获取它的上下文对象并使用 drawImage() 函数将要保存的元素绘制到该 canvas 上。以下代码演示了如何将整个 body 元素保存为图片：

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext('2d');
ctx.drawWindow(window, 0, 0, window.innerWidth, window.innerHeight, 'rgb(255,255,255)'); // 为了保持背景为白色

// 将 body 元素绘制到 canvas 上
const body = document.querySelector('body');
const bodyImg = new Image();
bodyImg.onload = function() {
  ctx.drawImage(bodyImg, 0, 0);

  // 将 canvas 转换为 dataURL，并保存到服务器
  const dataURL = canvas.toDataURL('image/png', 1.0);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/save');
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.send(JSON.stringify({
    dataURL,
  }));
};
bodyImg.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="' + body.offsetWidth + '" height="' + body.offsetHeight +'"></svg>';

这里我们创建了一个空白的 canvas，并将该页面绘制到了该 canvas 上。在这之后，我们可以绘制其他的元素到该 canvas 上，或者将该 canvas 转换为 dataURL 以保存到服务器。