nhn / toast-ui.react-image-editor Goto Github PK
View Code? Open in Web Editor NEWTOAST UI ImageEditor wrapper for React.js
License: MIT License
TOAST UI ImageEditor wrapper for React.js
License: MIT License
"@toast-ui/react-image-editor": "^1.0.1"
Windows10, Chrome
I created a basic implementation of the TOAT UI using React.js however I am facing an issue with the svg icons which are not displayed somehow.
import React from 'react';
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-image-editor/dist/svg/icon-a.svg';
import 'tui-image-editor/dist/svg/icon-b.svg';
import 'tui-image-editor/dist/svg/icon-c.svg';
import 'tui-image-editor/dist/svg/icon-d.svg';
import ImageEditor from '@toast-ui/react-image-editor';
var customTheme = {
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'common.bisize.height': '21px',
'common.backgroundImage': 'none',
'common.backgroundColor': '#1e1e1e',
'common.border': '0px',
// header
'header.backgroundImage': 'none',
'header.backgroundColor': 'transparent',
'header.border': '0px',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': 'NotoSans, sans-serif',
'loadButton.fontSize': '12px',
// download button
'downloadButton.backgroundColor': '#fdba3b',
'downloadButton.border': '1px solid #fdba3b',
'downloadButton.color': '#fff',
'downloadButton.fontFamily': 'NotoSans, sans-serif',
'downloadButton.fontSize': '12px',
// main icons
'menu.normalIcon.path': '../dist/svg/icon-b.svg',
'menu.normalIcon.name': 'icon-b',
'menu.activeIcon.path': '../dist/svg/icon-a.svg',
'menu.activeIcon.name': 'icon-a',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu icons
'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
'submenu.activeIcon.name': 'icon-c',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'lighter',
'submenu.activeLabel.color': '#fff',
'submenu.activeLabel.fontWeight': 'lighter',
// checkbox style
'checkbox.border': '1px solid #ccc',
'checkbox.backgroundColor': '#fff',
// rango style
'range.pointer.color': '#fff',
'range.bar.color': '#666',
'range.subbar.color': '#d1d1d1',
'range.value.color': '#fff',
'range.value.fontWeight': 'lighter',
'range.value.fontSize': '11px',
'range.value.border': '1px solid #353535',
'range.value.backgroundColor': '#151515',
'range.title.color': '#fff',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'
};
const PaintingForm = () => (
<ImageEditor
includeUI={{
loadImage: {
path: 'img/sampleImage.jpg',
name: 'SampleImage',
},
theme: customTheme,
menu: [
'crop',
'flip',
'rotate',
'draw',
'shape',
'icon',
'text',
'mask',
'filter',
],
initMenu: 'draw',
uiSize: {
width: '1000px',
height: '700px',
},
menuBarPosition: 'left',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
cornerColor: 'blue',
cornerStrokeColor: '#00a9ff',
borderColor: '#00a9ff',
}}
usageStatistics={true}
/>
);
const PaintingPage = () => {
return (
<PaintingForm />
);
};
export default PaintingPage;
I want load SVG icon.
Please help me.
Describe the bug
Been wracking my brain trying to find the bug in my implementation but it looks like ImageEditorInstance.addImageObject
will only work after the editor has been initialized with another image. Might just need to add an initialization check on addImageObject? I'm not super familiar with this library just yet but I think that could work.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
addImageObject adds image to the canvas
Screenshots
Image not showing - https://i.imgur.com/LPR7VPY.png
Image is showing - https://i.imgur.com/e5kpYBw.png
Code - https://i.imgur.com/jvZxIB5.png
In the last image you can see I'm trying to manually set the position but it doesn't reflect in image 1
Desktop (please complete the following information):
Additional context
I hope this helps get this figured out! I've seen a few people complain about addImageObject not working while doing some research and their main issues could just be the order they're doing things in.
V1.0.1
All
toast-ui.react-image-editor/src/index.js
Line 43 in 4cd189d
toast-ui.react-image-editor/src/index.js
Line 22 in 4cd189d
Shouldn't log to the console any strings.
// Write example code
thanks for this lib, looks really good
how ever it can't be rendered on server.
I mean i dont need to render image editor itself, it may render empty space but now it just crashes with error
~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:1828
var nav = window.navigator;
^
ReferenceError: window is not defined
at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:1828:12)
at __webpack_require__ (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:36:30)
at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:94:17)
at __webpack_require__ (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:36:30)
at util (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:56:18)
at ~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:59:10
at webpackUniversalModuleDefinition (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:9:20)
at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:16:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
N/A
N/A
"Getting Started" Link is dead. https://github.com/nhn/toast-ui.react-image-editor/blob/master/docs/getting-started.md
Link should work
We are trying to use this module with our React SSR (Server Side Rendering) project and its keep giving us below error.
ReferenceError: window is not defined
at Object.<anonymous> (/var/www/app/node_modules/tui-image-editor/dist/tui-image-editor.js:16:4)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Module._compile (/var/www/app/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Object.newLoader [as .js] (/var/www/apcrat/admin/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at Module.Hook._require.Module.require (/usr/local/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:70:39)
We have tried different solutions suggested online by setting window as global or conditioning in componentDidMount life cycle method but non of them working.
Is there any work around for this ?
How to �zoom in or zoom out image when editing.Thanks!
^1.0.0
Brave, mac OSX 10.14.1
No types file present in repo. Or in @types repo. Cannot use library in TypeScript project.
import ImageEditor from '@toast-ui/react-image-editor' // Could not find a declaration file for module '@toast-ui/react-image-editor'
import ImageEditor = require('tui-image-editor'); // import =` is not supported by @babel/plugin-transform-typescript Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.
Be able to use library in TypeScript project.
-is it possible to change the font?
maybe a font picker?
@toast-ui/[email protected]
The code works fine when running locally, but after building on my server ( Amazon Linux 2 ), I'm seeing the following error..
Uncaught TypeError: Super expression must either be null or a function
Removing ImageEditor and rebuilding solves the issue, so I'm not exactly sure what is causing this from the module.
<ImageEditor
ref={this.imageEditorRef}
includeUI={{
loadImage: {
path: photo.fullPath,
name: photo.name
},
menu: ['draw'],
initMenu: 'draw',
uiSize: {
width: '1000px',
height: '715px',
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={800}
cssMaxWidth={800}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
/>
Building on the server should allow the webapp and ImageEditor to behave as expected.
Hi,
Currently, the container color picker does not appear.
1.2.1
https://codesandbox.io/s/elegant-williamson-e4z1f?file=/src/App.js
<ImageEditor>
if the window changes of size ?Is there a smart way to do it ?
For the moment changing dynamically uiSize
and cssMaxHeight
and cssMaxWidth
doesn't work on window.resize
For example i want <ImageEditor>
size to change if an Ipad flips from lanscape to potrait window size.
Other example: my users use an Electron app and sometimes change Window Size
Thanks a lot for your help !
latest version
React and Electron app
The addShape method is not available because toast-ui.react-image-editor is using an old version of tui-image-editor (3.8.0). v3.10 includes the addShape method.
The following code does not work:
const instance = editorRef.current.getInstance()
instance.addShape('rect', {
fill: '#ff0000',
stroke: '#ff0000',
strokeWidth: 0,
top: 200,
left: 300,
rx: 80,
ry: 80,
isRegular: true
})
Be able to call addShape in toast-ui.react-image-editor successfully.
Hi, I hope you are doing good. Is there a way We can load secondary image over our main canvas image in tui-image-editor. Can you guide me on how to do that, It will help me a lot. Thanks
"@toast-ui/react-image-editor": "^1.0.1",
Chrome , firefox , etc
I installed the package and tried to run it but it is giving me error
Uncaught TypeError : o.a.createRef is not a function
my react version is 15.5.4
// Write example code
"@toast-ui/react-image-editor": "^1.0.0"
windows 7
run the code step by step from the repo's readme file got the following error:
Failed to compile
./node_modules/tui-image-editor/dist/tui-image-editor.js
Module not found: Can't resolve 'fabric/dist/fabric.require' in 'C:\sf\react-app\node_modules\tui-image-editor\dist'
This error occurred during the build time and cannot be dismissed.
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 = () => (
<ImageEditor
includeUI={{
loadImage: {
path: 'img/sampleImage.jpg',
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
}}
usageStatistics={true}
/>
);
export default MyImageEditor;
show the image editor in the page.
Can't use the loadImageFromURL without UI. Image is not loading and also there are no docs for react version in the docs section. The document section throws 404 error.
editorInstance.loadImageFromURL('./abc.png','abc');
Image load without UI
"@toast-ui/react-image-editor": "^1.0.1"
Chrome, macOS Mojave
Icons don't showing
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';
<ImageEditor
includeUI={{
loadImage: {
path: ""
name: 'SampleImage',
},
menu: ['shape', 'filter'],
initMenu: 'filter',
uiSize: {
width: '1000px',
height: '700px',
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics
/>
Hi,
I have setup the editor and have got everything working fine on my local environment. However when tested on an environment with a CSP an unsafe-eval error is thrown in to the console making the editor unusable.
Is this a known issue? And is there a work around for this?
Thanks
How can I get all applied filters (for Grayscale, Sharpen) along with Crop settings and other settings, that has been applied to image?
Use scenario is that I need to save them (properties / changes being applied to image) to backend, so the end user that works on small thumbnail configures its image, but then only I can reproduce the same result (using somehow exported settings [filters etc.]), but using original, big res image.
Image editor documentation returns 404: http://nhn.github.io/tui.image-editor/latest/ImageEditor.html
^3.9.0
chrome 83.0.4103.97
everything works fine but it will throw an error when click delete btn
TypeError: Cannot read property 'type' of undefined
at Graphics.getActiveObjectIdForRemove (VM48076 graphics.js:447)
at ImageEditor.removeActiveObject (VM47973 imageEditor.js:417)
at Object._delete [as delete] (VM48074 action.js:107)
at HTMLLIElement._this3.eventHandler. (VM48044 ui.js:476)
<TuiImageEditor {...props} />
// Write example code
no errors (or just get delete btn disabled)
How do I change the background image used while retaining the user edits (drawings/effects/texts/etc)?
Using loadImageFromURL
and loadImageFromFile
clears the user edits which I do not want.
And updating the props on the < ImageEditor/> like loadImage.path
does not seem to do anything after the initial render.
// Write example code
Module not found: Can't resolve 'fabric'# Expected Behavior
for example default 16:9.
This is the line from my package.json:
"@toast-ui/react-image-editor": "^1.0.0"
Firefox, Pop_OS 18.04
Node: v10.16.0.
The code is working fine in the brower, but when I try to do snapshot test of the component with ImageLoader in it, I get the following error:
FAIL src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.test.js
● Test suite failed to run
TypeError: Cannot read property 'createClass' of undefined
7 | import 'tui-image-editor/dist/tui-image-editor.css'
8 |
> 9 | import ImageEditor from '@toast-ui/react-image-editor'
| ^
10 |
11 | function ImageLoader({downloadURL, inViewport, imageData, downloadImage, currentPath}) {
12 |
at Object.<anonymous> (node_modules/tui-image-editor/dist/tui-image-editor.js:12869:39)
Component:
const myTheme = {
// Theme object to extends default dark theme.
};
const MyComponent = () => (
<ImageEditor
includeUI={{
loadImage: {
path: imageData.data,
name: 'SampleImage'
},
theme: myTheme,
menu: ['shape', 'filter', 'crop'],
initMenu: 'filter',
uiSize: {
width: '80vw',
height: '90vh'
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70
}}
usageStatistics={false}
/>
);
Google Chrome, macOS
1.do some action on the submenu, changed the submenu UI status
2.call loadImageFromURL to reload a new image to editor
3.reactive the menu last time i use
4.the pop up submenu still in the old UI status.......
for example:
1. i checked the Sepia checkbox on submenu of Filter
2. i called editorInstance.loadImageFromURL(url,name) , reloaded a new Image
3. i opened Filter menu again, Sepia checkbox was still in checked status
i think it's not what user is expecting, but i have no way to change the behavior
Provide an instance method, which can initialize the Menu and Submenu
Latest
Cordova App, testet on Android
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;
Start the application with my picture in it.
1.3.0
Chrome, IOS, React App
Using the sample code provided in the Readme file. Cannot use the slider properly. Below is the screen shot where the brightness Range/Slider goes beyond the limit. Same issue with all Range components
Slider/Range run as expected
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.