Image.setOptions is not a function

[KatGr]

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]

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]

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]

@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]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-07-24T08:07:45 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] Image.setOptions is not a function (#11) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.

[Jaberish]

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

[swtalk]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-12-03T08:25:05 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] Image.setOptions is not a function (#11) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.