如何在UniApp中利用Canvas功能将HTML内容转换为图片？

在 UniApp 中，你可以使用 `uni.createImageBitmap` 函数配合 Canvas 来将 HTML 内容转换为图片。以下是一个简单的步骤：

1. 首先，你需要获取到包含 HTML 的元素或字符串。假设你有一个 HTML 字符串 `htmlStr`。

let htmlStr = '<h1>Hello, World!</h1>';

2. 创建一个新的 `<canvas>` 元素并设置其宽度和高度，这将是渲染 HTML 的区域。

let canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600; // 可根据需要调整尺寸

3. 将 HTML 内容插入到 `<canvas>` 上，通常这一步通过创建一个 `documentFragment` 实现，因为直接操作 `innerHTML` 不支持跨域。

let docFrag = document.createDocumentFragment();
let imgElement = new Image();
imgElement.srcdoc = htmlStr;
imgElement.onload = function() {
    canvas.getContext('2d').drawImage(imgElement, 0, 0);
};
docFrag.appendChild(imgElement);

4. 使用 `createImageBitmap` 方法将 `<canvas>` 的内容转换为 `ImageBitmap` 对象，然后保存为图片。

uni.createImageBitmap(canvas)
  .then(imageBitmap => {
    uni.saveImageToPhotosAlbum({
      filePath: 'canvasImage.png', // 图片文件名，这里假设路径不存在
      data: imageBitmap.toDataURL('image/png'),
      success: function() {
        console.log('图片已保存至相册');
      },
      fail: function(error) {
        console.error('保存失败:', error);
      }
    });
  })
  .catch(error => {
    console.error('转换图像错误:', error);
  });