InvalidStateError：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的 HTMLImageElement 处于“损坏”状态

Question

import { Bodies, Composite, Engine, Mouse, MouseConstraint, Render, Runner } from 'matter-js';
import React, { useEffect } from 'react';
import * as S from './styles';
import flutter from '../../../../public/Icon/flutterLogo.png';
import android from '../../../../public/Icon/AndroidLogo.jpg';
import dart from '../../../../public/Icon/Dart.png';
import ios from '../../../../public/Icon/IosLogo.jpg';
import langChain from '../../../../public/Icon/LangChainLogo.jpg';
import fireBase from '../../../../public/Icon/fireBaseLogo.png';
import flutterflow from '../../../../public/Icon/flutterflowLogo.webp';
import nextjs from '../../../../public/Icon/nextjsLogo.png';
import reactLogo from '../../../../public/Icon/reactLogo.png';
import reactNative from '../../../../public/Icon/reactNative.png';



function SkillStack() {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const cw = 1000;
    const ch = 1000;

    let engine, render, runner, mouse, mouseConstraint;

    initScene();
    initMouse();
    initGround();
    initImageBox();

    function initScene() {
      engine = Engine.create();
      render = Render.create({
        canvas,
        engine,
        options: {
          width: cw,
          height: ch,
          wireframes: false,
          background: 'rgba(255,255,255,0.5)',
        },
      });
      runner = Runner.create();
      Render.run(render);
      Runner.run(runner, engine);
    }
    function initMouse() {
      mouse = Mouse.create(render.canvas);
      mouseConstraint = MouseConstraint.create(engine, {
        mouse,
        constraint: {
          render: {
            visible: false,
          },
        },
      });
      Composite.add(engine.world, mouseConstraint);
    }
    function initGround(){
      const segments = 32;
      const deg = (Math.PI * 2) / segments;
      const width = 50
      const redius = cw/2 + width/2;
      const height = Math.tan(deg / 2) * 2 * redius;

      for (let i = 0; i < segments; i++) {
        const theta = deg * i;
        const x = Math.cos(theta) * redius + cw / 2;
        const y = Math.sin(theta) * redius + ch / 2;
        addRect(x, y, width, height, { isStatic: true, angle: theta });
      }
    }
    function initImageBox() {
        addRect(200, 200, 200, 200, { render: { sprite: { texture: flutter} } });
    }
    function addRect(x,y,w,h,options={}){
      const box = Bodies.rectangle(x, y, w, h, options);
      Composite.add(engine.world, box);
    }
  }, []);

nextjs，matterjs

我正在使用nextjs和matterjs。 我不知道为什么会出现此错误。

我尝试使用 Matterjs 将图像放在盒子上，但出现此错误。 我尝试使用“image.src”和“onload”，但遇到了同样的错误。

请让我们知道如何解决此错误。

sssssssssssssssssssssssssssssssssssssssssssssssssssssss 斯斯斯斯斯斯斯斯斯斯斯斯斯 斯斯斯斯斯斯斯斯斯 斯斯斯斯斯斯斯斯斯 斯斯斯斯斯斯斯斯 斯斯斯斯斯斯斯 SSSSSS

Answer 1

我也有同样的问题。我通过直接加载图像及其路径来修复它。

所以下面的代码

function initImageBox() {
        addRect(200, 200, 200, 200, { render: { sprite: { texture: flutter} } });
    }

应该是

function initImageBox() {
        addRect(200, 200, 200, 200, { render: { sprite: { texture: 

`${process.env.PUBLIC_URL}/Icon/flutterLogo.png`,

} } });
    }

我不确定，但希望这对你有帮助！