如何在React JS中使用html2canvas将react组件转换为图像？

Question

你好，朋友们，我正在使用 React JS 中的图像比较器应用程序...我尝试在比较后下载图像，但不能。

我的应用程序

我的功能

import * as html2canvas from "html2canvas";
import { saveAs as save } from "file-saver";

//Convert component to Canvas
function canvasToBlob(canvas) {
  return new Promise((resolve, reject) => {
    try {
      canvas.toBlob((blob) => {
        if (!blob) {
          return reject(new Error("Could not convert canvas to blob"));
        }
        return resolve(blob);
      });
    } catch (e) {
      return reject(e);
    }
  });
}

//Convert canvas to base64
function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    try {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function () {
        if (typeof reader.result === "string") {
          return resolve(reader.result);
        } else {
          return reject(new Error("Could not convert blob to base64"));
        }
      };
    } catch (e) {
      return reject(e);
    }
  });
}

//Export base64 to image 
export async function exportDiv(querySelector, fileName) {
  const el = document.querySelector(querySelector);
  if (!el) {
    return "";
  }
  const canvas = await html2canvas(el, {
    backgroundColor: null,
  });
  const blob = await canvasToBlob(canvas);
  const base64 = await blobToBase64(blob);
  save(base64, fileName);
}

这是当我尝试将组件导出到图像时出现的错误

如果有人有解决方案，请不要犹豫。 .. 提前致谢

Answer 1

尝试对 html2canvas 使用不同的导入并确保您使用的是版本 1.4.1：

import html2canvas from "html2canvas";