Image.setOptions is not a function

KatGr commented 4 years ago

Version

Latest

Test Environment

Cordova App, testet on Android

Current Behavior

Trying to start the ImageEditor but only get the black backround. The ImageUrl looks like this on android: “file:///storage/emulated/0/Android/data/de.server.test/cache/1566554741747.jpg”

I get the following error:

TypeError: image.setOptions is not a function
    at klass.__setBgOverlayImage (vendors__code.js:119336)
    at klass.setBackgroundImage (vendors__code.js:119251)
    at vendors__code.js:106046
    at new Promise (<anonymous>)
    at new F (vendors__code.js:96350)
    at ImageLoader._setBackgroundImage (vendors__code.js:106043)
    at ImageLoader.load (vendors__code.js:106016)
    at Command.execute (vendors__code.js:111793)
    at Invoker._invokeExecution (vendors__code.js:97694)
    at Invoker.execute (vendors__code.js:97831)

My Code is from you example:

import React from 'react';
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';

const myTheme = {
  // Theme object to extends default dark theme.
};

const MyImageEditor = imageUrl => (
  <ImageEditor
    usageStatistics={false}
    includeUI={{
      loadImage: {
        path: { imageUrl },
        name: 'SampleImage',
      },
      theme: myTheme,
      menu: ['shape', 'filter'],
      initMenu: 'filter',
      uiSize: {
        width: '1000px',
        height: '700px',
      },
      menuBarPosition: 'bottom',
    }}
    cssMaxHeight={500}
    cssMaxWidth={700}
    selectionStyle={{
      cornerSize: 20,
      rotatingPointOffset: 70,
    }}
  />
);

export default MyImageEditor;

Expected Behavior

Start the application with my picture in it.

pjw9195 commented 4 years ago

i think , maybe ImageUrl is not set if you hope rendering, i resolved this method,

import React from 'react';
import TuiImageEditor from 'tui-image-editor';

export default class ReactImageEditor extends React.Component {
  rootEl = React.createRef();

  imageEditorInst = null;

  componentDidMount() {
    this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
      ...this.props
    });

    this.bindEventHandlers(this.props);
  }

  componentWillUnmount() {
    this.unbindEventHandlers();
    this.imageEditorInst.destroy();
    this.imageEditorInst = null;
  }

  shouldComponentUpdate(nextProps) {
    this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
      ...nextProps
    });
    this.bindEventHandlers(this.props, nextProps);

    return false;
  }

  getInstance() {
    return this.imageEditorInst;
  }

  getRootElement() {
    return this.rootEl.current;
  }

  bindEventHandlers(props, prevProps) {
    Object.keys(props)
        .filter(this.isEventHandlerKeys)
        .forEach((key) => {
          const eventName = key[2].toLowerCase() + key.slice(3);
          // For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} />
          if (prevProps && prevProps[key] !== props[key]) {
            this.imageEditorInst.off(eventName);
          }
          this.imageEditorInst.on(eventName, props[key]);
        });
  }

  unbindEventHandlers() {
    Object.keys(this.props)
        .filter(this.isEventHandlerKeys)
        .forEach((key) => {
          const eventName = key[2].toLowerCase() + key.slice(3);
          this.imageEditorInst.off(eventName);
        });
  }

  isEventHandlerKeys(key) {
    return /on[A-Z][a-zA-Z]+/.test(key);
  }

  render() {
    return <div ref={this.rootEl} />;
  }
}

rwilson504 commented 4 years ago

So i tried removing the loadImage properties in the component and instead tried using the loadImageFromURL(image, fileName) function from a useEffect to load the image. This kind of worked.... my image is now loaded correctly, unfortunately I cannot do anything with it and all the buttons/menus do nothing when clicked.

/// <reference path="./react-image-editor.d.ts" />
import ImageEditor from '@toast-ui/react-image-editor';
import * as React from "react";
import {IInputs} from "./generated/ManifestTypes";

export interface IProps {
    pcfContext: ComponentFramework.Context<IInputs>
}

export const ImageEditorComp: React.FC<IProps> = (props) => {
    const editorRef = React.useRef();
    const [image, setImage] = React.useState(props.pcfContext.parameters.image.raw);
    const [fileName, setFileName] = React.useState(props.pcfContext.parameters.fileName.raw);
    const [height, setHeight] = React.useState(props.pcfContext.mode.allocatedHeight);
    const [width, setWidth] = React.useState(props.pcfContext.mode.allocatedWidth);    

    React.useEffect(() => {
        setHeight(props.pcfContext.mode.allocatedHeight);
        //setHeight(props.pcfContext.mode.allocatedHeight !== -1 ? `${props.pcfContext.mode.allocatedHeight.toString()}px` : '100%');
    }, [props.pcfContext.mode.allocatedHeight]);

    React.useEffect(() => {
        setWidth(props.pcfContext.mode.allocatedWidth);
        //setWidth(props.pcfContext.mode.allocatedWidth !== -1 ? `${props.pcfContext.mode.allocatedWidth.toString()}px` : '100%')
    }, [props.pcfContext.mode.allocatedWidth]);

    React.useEffect(() => {
        let editor:any = editorRef.current;
        editor.imageEditorInst.loadImageFromURL(image, fileName)
    }, [image]);

    React.useEffect(() => {
        setImage(props.pcfContext.parameters.image.raw);
    }, [props.pcfContext.parameters.image.raw]);

    return (
            <ImageEditor
                ref={editorRef}
                includeUI={{
                // loadImage: {
                //     //path: {image},
                //     // name: {fileName}
                //     path: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIg0KCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI3MHB4IiBoZWlnaHQ9IjI3MHB4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNzAgMjcwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8ZyBjbGFzcz0ic3QwIj4NCgkJPHJlY3QgeT0iMC43IiBmaWxsPSIjRTlFOUU5IiB3aWR0aD0iMjY5IiBoZWlnaHQ9IjI2OS4zIi8+DQoJCTxwb2x5Z29uIGZpbGw9IiNDQkNCQ0EiIHBvaW50cz0iMjc3LjksMTg3LjEgMjQ1LDE0My40IDE4OC42LDIwMi44IDc1LDgwLjUgLTQuMSwxNjUuMyAtNC4xLDI3MiAyNzcuOSwyNzIiLz4NCgkJPGVsbGlwc2UgZmlsbD0iI0NCQ0JDQSIgY3g9IjIwMi40IiBjeT0iODQuMSIgcng9IjI0LjQiIHJ5PSIyNC4zIi8+DQoJPC9nPg0KPC9zdmc+',
                //     name: 'blank'
                // },
                menu: ['shape', 'filter'],
                initMenu: 'filter',                               
                menuBarPosition: 'bottom'
                }}
                cssMaxHeight={height}
                cssMaxWidth={width}
                selectionStyle={{
                cornerSize: 20,
                rotatingPointOffset: 70
                }}
                usageStatistics={true}
            />
            )
}

Lasvad commented 3 years ago

@rwilson504 Did you figure out how to get the menu items to work when you load the image with loadImageFromURL Im in a similar boat, loaded images into the editor with loadImageFromFile but menu items do nothing.

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-07-24T08:07:45

        * 메일 제목 :

Re: [nhn/toast-ui.react-image-editor] Image.setOptions is not a function (#11)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

Jaberish commented 3 years ago

I think you just need to remove the { } from path: { imageUrl }. Simply use path: imageUrl