React
cyrus-za opened this issue · comments
Can somebody help me implement this in react?
Smartcrop is library for finding crops of images. React is a library for building user interfaces.
I'm really not sure what you mean by "implementing" a library for finding crops for images "in" a library for building user interfaces.
What exactly are you trying to accomplish?
I'm trying to let my users upload a image with react dropzone and then crop
it. The problem is react has a virtual dom so I can't get you the image
element (or not without hacking react), what I can get though is the actual
file data in base 64.
…On Fri, 03 Nov 2017, 00:42 Jonas Wagner, ***@***.***> wrote:
Smartcrop is library for finding crops of images. React is a library for
building user interfaces.
I'm really not sure what you mean by "implementing" a library for finding
crops for images "in" a library for building user interfaces.
What exactly are you trying to accomplish?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#64 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABwqZQ9dSrDFGkn6d2sjdJ15JrKvdpuOks5sykVsgaJpZM4P6-nM>
.
You should be able to access an image element in your virtual dom via a ref, without any nasty hacks.
Yes I can access it, but it doesn't exist as it's a file that is uploaded.
So I'd need to now go and display it (without crop) for a few milliseconds
and then access it in ref and crop it, which results in a flashing effect.
If smart crop could read the base64 image instead of a element, I could
crop it before I display it
…On Sat, 04 Nov 2017, 16:46 Jonas Wagner, ***@***.***> wrote:
You should be able to access an image element in your virtual dom via a
[ref](https://reactjs.org/docs/refs-and-the-dom.html], without any nasty
hacks.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#64 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABwqZb5-dIHnENPqXAY0HsBwAwNsRoPSks5szHjQgaJpZM4P6-nM>
.
Just set visibility to hidden (or display: none) until you have all the information you need to display it properly?