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

Question

问题是我无法使用gatsby在我的SSR应用程序中创建不支持任何类型的图像： CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas 。

我尝试使用canvas npm包Canvas.Image来制作图像HTMLImageElement，但它与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包在其中绘制画布和Image 。

Answer 1

终于我有了办法。 我创建了一个名为getImage的函数， loadImage使用Promise从canvas loadImage方法中加载图像源：

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))
} , []);