JavaScript生成渐变背景PNG图片遇文件无法打开/生成问题求助

我编写了代码尝试将HTML body的渐变背景导出为PNG图片，但生成的image.png无法被任何工具打开。

初始实现代码 #

const downloadButton = document.getElementById('downloadButton');

downloadButton.addEventListener('click', function() {
  // 创建canvas元素并设置尺寸
  const canvas = document.createElement('canvas');
  canvas.width = 500;
  canvas.height = 300;

  // 获取canvas绘图上下文
  const ctx = canvas.getContext('2d');

  // 用body背景填充canvas
  const bodyStyle = document.body.style;
  const backgroundImage = bodyStyle.backgroundImage || 'white'; // 未设置时默认白色
  ctx.fillStyle = backgroundImage;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 添加背景说明文本
  ctx.font = '20px Arial';
  ctx.fillStyle = 'black';
  const rgbColor = getRGBColor(backgroundImage); // 转换为RGB格式
  ctx.fillText(`background Image : ${rgbColor}`, 200, 250); // 按需调整位置

  // 将canvas转换为PNG格式的DataURL
  const dataURL = canvas.toDataURL('image/png');

  // 将DataURL转换为Blob对象
  const blob = new Blob([dataURL.split(',')[1]], { type: 'image/png' });

  // 为Blob创建临时URL
  const fileURL = URL.createObjectURL(blob);

  // 触发PNG文件下载
  const link = document.createElement('a');
  link.href = fileURL;
  link.download = 'image.png';
  link.click();

  // 完成后释放临时URL（可选）
  URL.revokeObjectURL(fileURL);
});

// 十六进制颜色转RGB格式的函数
function getRGBColor(hexColor) {
  if (hexColor.length === 3) {
    hexColor = hexColor.repeat(2); // 扩展为完整RGB格式
  }
  const r = parseInt(hexColor.slice(0, 2), 16);
  const g = parseInt(hexColor.slice(2, 4), 16);
  const b = parseInt(hexColor.slice(4, 6), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

目标渲染的body背景样式 #

body {
   background-image : linear-gradient(0deg ,rgb(0,0,153), rgb(107,0,0));
}

编辑：
我的核心需求并非导出body的背景！我已经编写代码生成渐变字符串并在页面上展示（部分代码如下），现在希望将这个渐变效果导出为图片文件。

生成并展示渐变的部分代码 #

if (selectedRadio.value === 'option8') {
gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "), rgb(" + red2 + "," + green2 + "," + blue2 + "), rgb(" + red3 + "," + green3 + "," + blue3 + "), rgb(" + red4 + "," + green4 + "," + blue4 + ") , rgb(" + red5 + "," + green5 + "," + blue5 + "), rgb(" + red6 + "," + green6 + "," + blue6 + "), rgb(" + red7 + " ," + green7 + "," + blue7 + "), rgb(" + red8 + "," + green8 + "," + blue8 + "))";
}

document.getElementById('result').style.backgroundSize = 'cover';
document.getElementById('result').style.backgroundImage = gradientString;

编辑2：
我修改了代码，但现在连文件都无法生成了：

修改后的代码 #

const downloadButton = document.getElementById('downloadButton');

downloadButton.addEventListener('click', function() {
  // 创建canvas元素并设置尺寸
  const canvas = document.createElement('canvas');
  canvas.width = 500;
  canvas.height = 300;

  // 获取canvas绘图上下文
  const ctx = canvas.getContext('2d');

  // 使用gradientString创建渐变对象
  const gradient = new LinearGradient(0, 0, canvas.width, canvas.height); // 按需调整坐标改变方向
  const gradientParts = gradientString.split(',');
  for (let i = 1; i < gradientParts.length; i++) {
    const colorStop = gradientParts[i].trim().split(')')[0].split(' ');
    const color = colorStop[1];
    const position = parseFloat(colorStop[0].slice(0, -1));
    gradient.addColorStop(position, color);
  }

  // 将canvas填充样式设置为渐变
  ctx.fillStyle = gradient;

  // 用渐变填充canvas
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 添加渐变字符串说明文本（可选）
  ctx.font = '16px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText(`Gradient String: ${gradientString.slice(0, 50) + "..."}`, 10, 20); // 按需调整位置并截断字符串

  // 使用canvas.toBlob()将canvas转换为Blob对象
  canvas.toBlob((blob) => {
    // 为Blob创建临时URL
    const fileURL = URL.createObjectURL(blob);

    // 触发PNG文件下载
    const link = document.createElement('a');
    link.href = fileURL;
    link.download = 'image.png';
    link.click();

    // 完成后释放临时URL（可选）
    URL.revokeObjectURL(fileURL);
  }, 'image/png');
});

内容的提问来源于stack exchange，提问作者Wp-PHP