如何使用js 导出各种格式的图片

JavaScript 可以使用 Canvas API 将画布中的内容导出为多种格式的图片，例如 PNG、JPEG、WEBP 等。下面是使用 Canvas API 导出图片的步骤：

1. 创建一个 Canvas 元素，并设置它的宽度和高度。

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

2. 获取 Canvas 2D 上下文，并将画布中的内容绘制到上下文中。

   const ctx = canvas.getContext('2d');
   ctx.drawImage(image, 0, 0);

其中，image 可以是一个 HTMLImageElement、HTMLVideoElement、HTMLCanvasElement 或者 ImageBitmap 对象。

3. 将 Canvas 中的内容导出为图片。

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

其中，第一个参数用于指定导出的图片格式，可以是 'image/png'、'image/jpeg'、'image/webp' 等格式。

完整的代码示例如下：

function exportImage(image, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);

  const dataURL = canvas.toDataURL('image/png');
  return dataURL;
}

// 使用示例
const image = new Image();
image.src = 'example.jpg';
image.onload = function() {
  const dataURL = exportImage(image, image.width, image.height);
  console.log(dataURL);
};

这个示例会将 example.jpg 图片导出为 PNG 格式的 base64 编码的字符串，并将它打印到控制台中。你可以将这个字符串保存为文件，或者将它作为图片的数据传输到服务器端。