nhn
Image.setOptions is not a function
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.
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} />;
}
}
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}
/>
)
}
@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.
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!.
I think you just need to remove the { } from path: { imageUrl }.
Simply use path: imageUrl
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!.