将HTML Canvas内容转换为可上传的图像文件（File对象）

canvas.toBlob(callback, type, quality);

/**
 * 将 HTMLCanvasElement 的内容异步转换为 Blob 对象
 * @param {HTMLCanvasElement} canvas 要转换的 canvas 元素
 * @param {string} type 输出图像的 MIME 类型 (例如 'image/png', 'image/jpeg')
 * @param {number} quality 图像压缩质量 (仅适用于 'image/jpeg' 或 'image/webp', 0-1)
 * @returns {Promise<Blob>} 返回一个 Promise，解析为 Blob 对象
 */
async function getCanvasBlob(canvas, type = 'image/png', quality = 0.92) {
  return new Promise((resolve, reject) => {
    canvas.toBlob(blob => {
      if (blob) {
        resolve(blob);
      } else {
        reject(new Error('Failed to create Blob from canvas.'));
      }
    }, type, quality);
  });
}

// 示例用法 (假设存在一个 id 为 'myCanvas' 的 canvas 元素)
// const canvasElement = document.getElementById('myCanvas');
// getCanvasBlob(canvasElement, 'image/png')
//   .then(blob => {
//     console.log('Canvas Blob:', blob);
//     // 可以在这里继续处理 blob
//   })
//   .catch(error => {
//     console.error('Error getting canvas blob:', error);
//   });

new File(blobParts, fileName, [options]);

/**
 * 将 HTMLCanvasElement 的内容异步转换为 File 对象
 * @param {HTMLCanvasElement} canvas 要转换的 canvas 元素
 * @param {string} fileName 生成的 File 对象的名称 (例如 'my-drawing.png')
 * @param {string} type 输出图像的 MIME 类型 (例如 'image/png', 'image/jpeg')
 * @param {number} quality 图像压缩质量 (仅适用于 'image/jpeg' 或 'image/webp', 0-1)
 * @returns {Promise<File>} 返回一个 Promise，解析为 File 对象
 */
async function getImageFileFromCanvas(canvas, fileName = 'canvas-image.png', type = 'image/png', quality = 0.92) {
  try {
    const blob = await getCanvasBlob(canvas, type, quality);
    if (!blob) {
      throw new Error('Failed to create Blob from canvas.');
    }
    // File 对象是 Blob 的一个特殊类型，增加了 name 和 lastModified 等属性
    const file = new File([blob], fileName, { type: type, lastModified: Date.now() });
    return file;
  } catch (error) {
    console.error('Error generating image file from canvas:', error);
    throw error; // 重新抛出错误以便调用者处理
  }
}

// 假设你有一个名为 'myCanvas' 的 canvas 元素
const canvasElement = document.getElementById('myCanvas');

// 确保 canvas 元素存在且有内容
if (canvasElement && canvasElement.getContext) {
  const ctx = canvasElement.getContext('2d');
  // 简单绘制一些内容作为示例
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 80, 80);
  ctx.fillStyle = 'blue';
  ctx.arc(150, 50, 40, 0, Math.PI * 2);
  ctx.fill();

  getImageFileFromCanvas(canvasElement, 'my-drawing.png', 'image/png')
    .then(file => {
      const formData = new FormData();
      // 'uploadFile' 是服务器期望接收文件时的字段名，可以根据后端接口调整
      formData.append('uploadFile', file);

      console.log('成功生成 File 对象:', file);
      console.log('File 对象名称:', file.name);
      console.log('File 对象类型:', file.type);
      console.log('File 对象大小:', file.size, '字节');

      // 接下来可以使用 fetch 或 XMLHttpRequest 发送 formData 到服务器
      // fetch('/upload-endpoint', { // 替换为你的上传接口地址
      //   method: 'POST',
      //   body: formData
      // })
      // .then(response => {
      //   if (!response.ok) {
      //     throw new Error(`HTTP error! status: ${response.status}`);
      //   }
      //   return response.json();
      // })
      // .then(data => console.log('上传成功:', data))
      // .catch(error => console.error('上传失败:', error));

      // 为了演示 FormData 内容，可以这样查看（注意 formData.get() 只能获取第一个同名值）
      // console.log('FormData 中的文件:', formData.get('uploadFile'));
    })
    .catch(error => {
      console.error('从 canvas 生成图像文件失败:', error);
    });
} else {
  console.error('Canvas 元素未找到或不支持。');
}

// HTML 结构示例 (在你的页面中添加这个 canvas 元素)
/*
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>
*/