scaleflex / filerobot-image-editor Goto Github PK
View Code? Open in Web Editor NEWEdit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
License: MIT License
Edit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
License: MIT License
Please tell me how can I send edited image into a php script, I was trying on few times and I don't have any idea, I can only download it. Thanks for your response.
Following is my code snippet:
<FilerobotImageEditor
show={show}
src={src}
config={config}
onClose={image => {
const editedCanvas = document.getElementById(
'scaleflex-image-edit-box',
);
console.log("==>editedCanvas :", editedCanvas, "\n");
}}
onComplete={image => {
console.log('==>On Complete image :', image, '\n');
}}
/>
Basically I want to be able to set the processed image as source to another image and eventually upload that to my server.
I would really appreciate a quick response as to solve my problem.
Hey guys,
I just came across this project - it's looking great!
However, I couldn't see the capability to draw lines and polygons on top of the image? Is this on the timeline?
Tell me how to hide any of the editing methods (js version)?
Adjust
Effects
Filters
Orientation
Crop
Resize
Watermark
While viewing the codesandbox demo, the "Processing" loading overlay never goes away. This is with the unmodified codesandbox demo, but I'm seeing the same thing in my local version.
Hi, I'm looking at integrating your project into https://github.com/DiemenDesign/AuroraCMS/ to allow clients to quickly edit images. I'm currently allowing uploads in Summernote with elFinder integrated which has simple cropping and resizing and auto thumbnail creation, but I'd like to give my clients more options using filerobot.
I may have missed it, but I couldn't find where I can open an image from the server, and have it saved back to the server, not downloaded, or sent to another storage service, then have the thumbnail/image updated on the page to reflect the editing changes.
I'm also hoping it's going to integrate easily with Bootstrap 4, which is what I use for the Administration area.
Hello there, I really want to use all features of package. It's great. But in another way, fixing the editor's size it not suitable in my situation. I do not only read all document but also brooding your codes line by line.
Any ideal to fix it, make it more flexible. Hope to be helped 👍👍 Many thanks ❤
I can't change the text through js.
Приветствую!
Обнаружил при работе с редактором, что при максимальном значении Экспозиции в Редактировании выбивает ошибку
TypeError: Cannot read property '1' of undefined
http://joxi.ru/4Akee47tobdWlm
Данная ошибка и в примерах
https://codesandbox.io/s/k3q9vrk707
When you try to set a link to a picture that has query parameters, the editor cannot load it.
For example "https://ru.gravatar.com/userimage/52160824/b8521a4b87f8dae053ed378ee6ed5b76.jpg?size=200"
And it seems that problem is that the editor adds a timestamp to the end of the URL:
https://ru.gravatar.com/userimage/52160824/b8521a4b87f8dae053ed378ee6ed5b76.jpg?size=200?1579009880820
Library version 3.6.3
Great editor so far guys!
I have a feature suggestion for adding text input and dnd functionality in the watermark menu. For now, we can add picture but it would also be nice to have text input.
Thanks!
Hello!
I have a problem with custom localization. It always English, even if you provide a translation.
It's in projects/react/ImageEditorWrapper.js
In line 18:
config.language = translations[config.language] ? config.language : 'en';
we check only local translations
, not config.translations
provided by user.
I'm sure something like config.language = (config.translations[config.language] || translations[config.language]) ? config.language : 'en';
would solve the problem.
I hope this would help!
Anyway, thanks! You're doing a great job!
There are any way to get current object properties? Like images, filters, positions, etc... For future usage, think about restore it from a database for continous adjusts.
So, is possible get them all?
If I do not want to keep other cropping such as banner. is it possible ?
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/filerobot-image-editor/dist/lib/caman/core/index.js:990:1)
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/app/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 ?
Please add configuration to disable query in image url
can i custom onComplete callback function ? to prevent download
I noticed that you are using the image-type library that is supposed to support jpg, png, gif, webp, flif, cr2, tif, bmp, jxr, psd, ico, bpg, jp2 - JPEG 2000, jpm - JPEG 2000, jpx - JPEG 2000, heic, cur, dcm - DICOM Image File.
I have only successfully edited jpg, png, and gif. Thanks!
I got an image from my server and use filerobot-image-editor to modify it, then I need to save it on my server rather than download. So how can I modify the "DOWNLOAD" button click event? Or what should I do in other way? ( I only include filerobot-image-editor.min.js in my cshtml. )
Please, add "Round crop" to Crop
http://joxi.ru/Vm677POi4Q9102
Is there a way to load some image from file system instead of url in the react component?
Is it possible to load a base64 image? (e.g. from webcam)
Hello There,
Filerobot Image Editor is great tool with all custom config option.
but I want to open image in "crop" mode by default, is there any configuration option to do this ??
Hi
I'm wondering which function/method is responsible for downloading the image?
I'm trying to change the behavior so I could upload the transformed image and later upload it to S3 for example.
Thanks
@dzmitry-stramavus Check it & hope your team fix it soon.
It's great to hear some good news whenever releases new upgrade!
Download image 1000x1000px
http://joxi.ru/52aYY7aUEnGGl2
Replace resolution with 300x300px
http://joxi.ru/823ppPaF9O66KA
As a result, the image becomes “soapy”. This is clearly visible on the retina screen.
On your example:
1820x1215 - https://scaleflex.cloudimg.io/v7/https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg?w=1820&h=1215
500x333 - https://scaleflex.cloudimg.io/v7/https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg?w=500&h=333.79120879120876
Cropping size selection with automatic expansion of the area to the edges of the image
It would be very useful functionality, because constantly expanding the border is very routine
result of input of width and height is wrong:
Hello i didn't find how to add a button open a modal .. sorry for with newbe question !
Hello it possible to use this script to modify image in own serveur without cdn image ?
I am not sure
Thanks
If I resized the image, then I will see the result only after saving
http://joxi.ru/MAjll4yIj79BMm
The image should change with resizing in the settings window
http://joxi.ru/gmvgg40CqNaK72
It will be very cool!
The demo page was not responsive.
On a smartphone, the slide tab at the top is hard to see and editing is complicated.
There is no problem if the size is large like a PC screen.
It's a wonderful project, so please do your best. I'm rooting for you.
i want to add process when editor perfectly displayed on component
Hi!
Thank you to fixing this good editor!
We need to methods onClose() / onOpen() to js version (onOpen missing in the react too)
Perhaps you will update the documentation.
Thanks!
You making great product!
Hi!
FullSize don't work
http://joxi.ru/xAe00qnsR8vdl2
blank screen
http://joxi.ru/1A5ppP3FD6xLO2
But in your example everything works
http://joxi.ru/DmBDDOQSJkp3oA
I am using a fresh version library for js
I need get the Base64 string of the image instead of download the physical file,
how can access to returned value of rendered image ?
I can't change or remove the title of the editor which is : Filerobot Image Editor.
Is it possible to access an array of all operations performed on the image within the onComplete
callback?
Just found this editor and its great. There are some missing features like:
Writing text
Drawing on image
It would be great if these features are done with drag n drop, so do you have these features in your roadmap. If yes then how long will it take to implement these?
Hi!
Panel "Crop" and other panel have "Apply" button and have chance to "Remove" change
http://joxi.ru/DrlVV48IVE81B2
Panel "Resize" don't have "Apply" button and don't have chance to "Remove" change
http://joxi.ru/xAe00qnsRBnyy2
Please, add this change and button to "Resize" panel in next releases
Thank you!
After applying a watermark, I fetch the edited image blob from the onComplete prop. Every other change is applied within this blob, but the watermark is missing. Any ideas?
When i try to use the file upload plugin with next i receive the following error in the dev console
Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.
https://github.com/zeit/next.js/blob/master/errors/css-npm.md
It's caused by line https://github.com/scaleflex/filerobot-image-editor/blob/master/projects/react/ImageEditorWrapper.js#L7
What is the most optimal fix for the above??
In the watermark menu, there is a grid used to pick a position of watermark image but it overlaps with the upload image button on mobile devices.
I would not like the user to change the dimensions of the crop.
While using an editor with "Edit and download" implementation I see that GET request is being made to URL/none endpoint every time I click on the watermark menu and even when I change the opacity of watermark image.
Encoding problems HTML - "Â" is displayed instead " "
On "rotate" method
Finding ° on file https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.3.0/filerobot-image-editor.min.js
Hello! firstly, thanks for the wonderful library.
In the latest update, I can no longer use blobs as the image source for the image editor. In the previous version, it was available and it was convenient, because this format is used to send files to the server.
Is it possible to count on the return of this feature, or now it will be necessary to convert dataURL to blob?
If i try to use blob, i get such an error:
src.split is not a function
Hi!
You have a great product. Thanks!
But we have problem after switching to cdn.
Server has Access-Control-Allow-Origin: *
Safari browser:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
SecurityError: The operation is insecure.
How do you solve this problem with your cdn?
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.