Comments (6)
jinwoo-kim-nhn
commented on May 26, 2024
1
@joongbae I think you should check this part.
theme = {
...
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC
...
}from toast-ui.react-image-editor.
jinwoo-kim-nhn
commented on May 26, 2024
hi, @joongbae
If you used the webpack's file-loader as:
...
}, {
test: /\.svg$/,
loader: 'file-loader',
options: {
publicPath: './dist/'
}
},
...You can do as follows.
import iconA from 'tui-image-editor/dist/svg/icon-a.svg';
...
...
var customTheme = {
...
'submenu.normalIcon.path': iconA,
...thanks.
from toast-ui.react-image-editor.
joongbae
commented on May 26, 2024
I have tried
But the issue still remains.
import React from 'react';
import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/react-image-editor';
import iconA from 'tui-image-editor/dist/svg/icon-a.svg';
import iconB from 'tui-image-editor/dist/svg/icon-b.svg';
import iconC from 'tui-image-editor/dist/svg/icon-c.svg';
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': iconB,
'menu.normalIcon.name': 'icon-b',
'menu.activeIcon.path': iconA,
'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': iconA,
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': iconC,
'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;Is there something I'm missing?
from toast-ui.react-image-editor.
joongbae
commented on May 26, 2024
Wow, You are a great engineer.
But the download button doesn't work and I can't import the initial image.
...
loadImage: {
path: 'img/sampleImage.jpg',
name: 'SampleImage',
}
...When the download button is executed, the image will appear in a new window. Why is this?
import React from 'react';
import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/react-image-editor';
import iconA from 'tui-image-editor/dist/svg/icon-a.svg';
import iconB from 'tui-image-editor/dist/svg/icon-b.svg';
import iconC from 'tui-image-editor/dist/svg/icon-c.svg';
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': iconB,
'menu.normalIcon.name': 'icon-b',
'menu.activeIcon.path': iconA,
'menu.activeIcon.name': 'icon-a',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC,
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu icons
'submenu.normalIcon.path': iconA,
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': iconC,
'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: '900px',
},
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;
from toast-ui.react-image-editor.
jinwoo-kim-nhn
commented on May 26, 2024
Please refer to this issue.
there is still a shortage in many parts, but I will improve it all.
from toast-ui.react-image-editor.
joongbae
commented on May 26, 2024
As a result of how you told me, I succeeded. The initial image is imported and the download button works fine. I hope this code will help others.
Thank you!!
import React from 'react';
import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/react-image-editor';
import iconA from 'tui-image-editor/dist/svg/icon-a.svg';
import iconB from 'tui-image-editor/dist/svg/icon-b.svg';
import iconC from 'tui-image-editor/dist/svg/icon-c.svg';
import startImg from '../img/sampleImage.jpg';
import FileSaver from 'file-saver';
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': iconB,
'menu.normalIcon.name': 'icon-b',
'menu.activeIcon.path': iconA,
'menu.activeIcon.name': 'icon-a',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
'menu.disabledIcon.path': iconA,
'menu.hoverIcon.path': iconC,
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu icons
'submenu.normalIcon.path': iconA,
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': iconC,
'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: startImg,
name: 'SampleImage',
},
theme: customTheme,
menu: [
'crop',
'flip',
'rotate',
'draw',
'shape',
'icon',
'text',
'mask',
'filter',
],
initMenu: 'draw',
uiSize: {
width: '700px',
height: '900px',
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
cornerColor: 'blue',
cornerStrokeColor: '#00a9ff',
borderColor: '#00a9ff',
}}
usageStatistics={true}
/>
);
const onTestSaveFile = () => {
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
}
const PaintingPage = () => {
return (
<>
<PaintingForm />
<onTestSaveFile/>
</>
);
};
export default PaintingPage;from toast-ui.react-image-editor.
Related Issues (20)
- Load secondary Image over canvas HOT 1
- submenus stay in old status when i reload a new image HOT 5
- how to set default crop option? HOT 1
- How to get edited image content/ Data url? HOT 4
- ReferenceError: window is not defined HOT 8
- throw TypeError Error when clicking delete btn(when nothing is selected)
- How to zoom in or zoom out image when editing. HOT 5
- How to get all filters and modifications applied to an image HOT 5
- How can we resize <ImageEditor> if the window changes of size ? HOT 1
- CSP Issues? HOT 3
- feature request! - Can we add a font picker? HOT 1
- addShape method not available (old version of tui-image-editor) HOT 1
- Getting Started Link is Dead HOT 1
- Can only addImageObject after an image has been manually loaded. HOT 4
- Color picker palette does not appear HOT 5
- Change image while keeping the filters/texts/objects/etc HOT 4
- Range/Slider not working HOT 1
- incompatible with react 17 HOT 3
- Error when building on server - Uncaught TypeError: Super expression must either be null or a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from toast-ui.react-image-editor.