nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
http://ui.toast.com/tui-image-editor
MIT License
6.84k stars 1.26k forks source link

After loadImageFromURL buttons doesn't work #852

Closed Dmytro9999 closed 1 year ago

Dmytro9999 commented 1 year ago

How to get the menu items to work when you load the image with loadImageFromURL?

Dmytro9999 commented 1 year ago

Example of my code below, the problem is loadImage, When I use my props in the path, the image does not show up (but the url taken from google works)(the images are on the server and I just store the path to them in the base ) . I tried using loadImageFromURL when initializing the component, then the image appears, but the editor buttons don't respond/work.

<ImageEditor
                ref={editorRef}
                includeUI={{
                    loadImage: {
                        path: 'https://source.unsplash.com/random/800x600',
                            name: 'sample image',
                                             /path: { props }  doesn't work :(
                                             /path:  props   also doesn't work :(
                                             /my props look:  http://localhost:3000/machine-media//1680214344437-621328386-titleImg.jpg
                    },
                    menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter' ],
                    uiSize: {
                        width: '1000px',
                        height: '700px',
                    },
                    theme: debug,
                    menuBarPosition: 'bottom',
                    initMenu: 'rotate',
                    cssMaxWidth: 700,
                    cssMaxHeight: 500,
                    selectionStyle: {
                        cornerSize: 20,
                        rotatingPointOffset: 70,
                    },
                }}
                menuBarPosition='bottom'
                cssMaxHeight={500}
                cssMaxWidth={700}
                selectionStyle={{
                    cornerSize: 20,
                    rotatingPointOffset: 70,
                }}
                usageStatistics={true}
            />
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-03-31 Π² 01 40 08
Sarafaniuk commented 1 year ago

I also encountered this problem, it seems that the editor does not pull images from localhost, try storing images on the server and specify the path to them, it worked for me so