-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is it impossible to include the Canvas via Direct API instead of includeUI parameter ? (React) #755
Comments
It looks like issue #624. |
Update: If you want to try : UI to set // fileLink = URL of your Image
// fileName = The name of the image imported
const props = (fileLink, fileName) => ({
// INCLUDE UI
includeUI: {
loadImage: {
path: fileLink,
name: fileName
},
initMenu: "",
uiSize: {
width: "1908px",
height: "1000px"
}
},
cssMaxWidth: 1908,
cssMaxHeight: 1000,
}); CSS trick const classes = {
editor: {
"& .tui-image-editor-container": {
overflow: "hidden"
},
// Enlever l'help menu pour accéder à "l'historique"
"& .tui-image-editor-header, .tui-image-editor-help-menu, .tui-image-editor-controls, .tui-image-editor-submenu": {
display: "none"
},
"& .tui-image-editor-main-container": {
backgroundColor: "transparent !important"
}
}
}; Component return <div css={classes.editor}>
<ImageEditor ref={editorRef} {...props(fileLink, fileName)} />
{/* blablabla */}
</div> |
@LotharieSlayer |
This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks! |
This issue will be closed due to inactivity. Thanks for your contribution! |
Summary
Hi,
I'm currently redoing your entire API in React components, but I have a problem.
I'm looking how to integrate the canvas of the image I want to edit via the Direct API in React. (As example 2 of the documentation : https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect)
loadImageFromUrl() doesn't seem to work without the includeUI parameter, and even though I've setup the max canvas size.
How can I natively integrate your API into my website?
Additional context
For the moment my only solution has been to hide the CSS of the UI but certain usability bugs come up frequently with Crop (where cropzone is null), Shape (which I cannot validate with mouseUp), or Text. (like the codesandbox link from #627)
Result with includeUI with hidden css :
![image](https://user-images.githubusercontent.com/49253492/163187600-fcaf1ef8-278a-4760-a484-d87514234817.png)
![image](https://user-images.githubusercontent.com/49253492/163187465-064609ea-dea7-4c9e-91d2-a6712bb4e087.png)
What I would like to do :
![image](https://user-images.githubusercontent.com/49253492/163186493-ea01bc2a-e86c-4fc6-95d6-ecc623200622.png)
![image](https://user-images.githubusercontent.com/49253492/163186680-8363f5ba-aaef-4db0-ad01-664f1c955bc0.png)
![Capture d’écran_2022-04-14_11-40-12](https://user-images.githubusercontent.com/49253492/163358878-ce487bdf-e716-4b72-a5ef-23e8fb8d0f26.png)
![image](https://user-images.githubusercontent.com/49253492/163186949-2bb242a2-d325-43bf-a7b3-6c4efde45cb0.png)
😭 😭 😭 Result :
First render when mounted
Re-render (no more canvas if I try to re-loadImageFromURL())
Version
TUI Image Editor : v3.15.2
React : v16.13.1
The text was updated successfully, but these errors were encountered: