Giter Club home page Giter Club logo

filerobot-image-editor's People

Contributors

ahmeeedkhallaf avatar ahmeeedmostafa avatar aminzoubaa avatar amrw-js avatar benkaiser avatar carlos22 avatar clickera avatar cvetan-sfx avatar dependabot[bot] avatar duckrabbitpy avatar dzmitry-stramavus avatar enova-sfx avatar grandadevans avatar himonrana avatar jducro avatar jedmeng avatar karpovich-philip avatar michaylov avatar nermeenmoustafa avatar peregraum avatar pulsejet avatar sfx-jfou avatar steldevs avatar vitaly-shaposhnik avatar wagdy-git avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

filerobot-image-editor's Issues

Question: Send to php script

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.

onComplete callback not being triggered on complete processing of image.

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.

Draw on image?

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?

Integration for editing images and storing edited images on server instead of downloading.

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.

Can I resize modal mode to full-screen mode ?

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 ❤

Localization bug

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!

How get object json and restore it?

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?

ReferenceError: window is not defined

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 ?

What file formats are supported?

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!

How can I post the modified image to my server?

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. )

browse images

Is there a way to load some image from file system instead of url in the react component?

base64 image

Is it possible to load a base64 image? (e.g. from webcam)

Open image in "crop" mode by default,

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 ??

Toolbar Bug when you "Apply"

Toolbar Bug when you "Apply"

  • Target: Effects or all Toolbar items.
  • Description: Effects apply on image but Toolbar state did not update. So the next time if you want to reset only that effect seemly impossible.
  • Attached: I reproduce it in ZIP file.

EffectBug.zip

@dzmitry-stramavus Check it & hope your team fix it soon.
It's great to hear some good news whenever releases new upgrade!

Image quality deteriorates when resolution is changed (retina)

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

Auto cropping border

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

wrong input in crop

result of input of width and height is wrong:

  • 2 => 1
  • 3 => 2
  • 4 => 3
  • 5 => 4
  • 6 => 5
  • 8 => 7
  • 9 => 8

Can you make it responsive?

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.

Need methods onClose() / onOpen() to js version

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!

Write text and draw on image

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?

[nextjs] Throws css imported by dependancy error

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??

Unnecessary get request

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.

It is no longer possible to use a Blob as a "src" of image?

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

Снимок экрана от 2020-06-04 21-14-52

CDN Cors errors

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.