Question

问题是我无法创建不受支持的类型的图像：CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或{{ 1}}或ImageBitmap在我的带有gatsby的SSR应用程序中。

我尝试了OffscreenCanvas npm软件包canvas来制作图像HTMLImageElement 但是它与Image构造函数消息也有相同的错误。

我的主要错误消息：

Canvas.Image

节点Context.js:225 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'软件包代码和错误消息：

canvas

import { Image as CanvasImage } from 'canvas';

const image = new CanvasImage();
image.src = avatars[avatar];

console.log(image);

我使用TypeError: canvas__WEBPACK_IMPORTED_MODULE_3__.Image is not a constructor包绘制画布并在其中绘制react-konva。

Answer 1

最后，我有办法做到这一点。我创建了一个名为getImage的函数，该函数将使用canvas从loadImage Promise方法中加载图像源：

import { loadImage } from 'canvas';

export async function getImage(src, cb) {
  return loadImage(src)
    .then((image) => image)
    .catch(err => console.log(err));
};

并轻松地在我的组件中使用它：

let [imageSource, setImageSource] = useState();
useEffect(() => {
  getImage(ladderSvg)
    .then((image) => setImageSource(image))
} , []);

如何通过gatsby SSR加载图像并在画布中使用图像

1 个答案: