Не удается загрузить изображение в Konva-React, возникает ошибка TypeError: response-konva webpack ... Изображение не является конструктором

Question

Я пытаюсь использовать Konva-React для установки изображения в объектах формы с помощью fillpatternImage.

Я пробовал несколько разных способов, но, видимо, мне нужно использовать объект Image, а не Konva Image для fillPatternImage .

Почему я не могу использовать Konva.Image () в Konva.Shape.fillPatternImage (imageObj)?

Итак, я пробую это ....

const GridView = (props) => {

    const placeRectImages = props.places.map(({ ...otherProps }, index) => {
        const corsProxy = 'https://cors-anywhere.herokuapp.com/' + otherProps.default_image_url
        var imageObj = new Image();  /error happens here....
        imageObj.src = corsProxy
        imageObj.onload = function () {

            var canvas = document.createElement("canvas"),
                canvasContext = canvas.getContext("2d");
            canvasContext.drawImage(imageObj, 0, 0, 30, 30);
            var dataURL = canvas.toDataURL();

            return <Circle
                x={20 * index}
                y={20 * index / 2}
                width={50}
                height={50}
                shadowBlur={5}
                fillPatternImage={dataURL} // would try passing imageObj if dataURL didn't work 
            />
        };

Но появляется сообщение об ошибке «TypeError: response_konva__WEBPACK_IMPORTED_MODULE_1 __. Image не является конструктором»

Любые идеи о том, как разрешить это или иным образом заполнить изображение в форме конвы, будут оценены ...

РЕДАКТИРОВАТЬ. Как сказал Лавртон ниже, я импортировал изображение из React-Konva, что вызвало проблему с доступом к глобальной переменной. Поэтому я изменил Image() на window.Image()

Все еще не загружался в мой объект Shape, поэтому, чтобы заставить его работать полностью, я сделал это ..

const PlaceCircle = (url, index) => {
    let timage
    const [image, setImage] = useState(null)
    useEffect(() => {
        loadImage();

    }, []);
    const loadImage = () => {
        timage = new window.Image();
        timage.src = url;
        timage.addEventListener("load", handleLoad);
    }
    const handleLoad = () => {
        setImage(timage);
    }
    return (
        <Circle
            x={20 * index}
            y={20 * index / 2}
            width={50}
            height={50}
            shadowBlur={5}
            fillPatternImage={image}
        />
    );
}

и затем используя указанную выше функцию для сопоставления с моими реквизитами ..

    return (

        <Stage width={window.innerWidth} height={window.innerHeight}>
            <Layer>
                {props.places.map(({ ...otherProps }, index) => {
                    const corsProxy = otherProps.default_image_url
                    return PlaceCircle(corsProxy, index)
                })}
            </Layer>
        </Stage>

    );

Answer 1

Как вы импортировали Image компонент из react-konva:

import { Image } from 'react-konva';

Такой импорт перезаписывает глобальный объект Image.

Чтобы исправить проблему, вы можете:

1. Переименовать импорт

import { Image as KonvaImage } from 'react-konva';

Или доступ Image из глобального:

var imageObj = new window.Image();

Или создать изображение из документа:

var imageObj = document.createElement('img');