search

jodhman / react-eyedrop

Seamlessly integrate a static typed, fully-tested color-picking React component/hook!
24 stars 11 forks source link

Converted component to use React Hooks and fixed wrong color issue #9

Closed gundamftw closed 4 years ago

gundamftw commented 4 years ago

The basic functions works again. Haven't test out all the hooks yet, I will do that soon

jodhman commented 4 years ago

Hello there! Sorry for not being able to address any of your issues. Been super-busy moving to a new country! Glad you chose to take it into your own hands tho'. :-D

gundamftw commented 4 years ago

Well my project relies on this plugin and I had hauled it way too long, I have to do something. Anyway I'm all done now. The bugs have all been fixed and I have added some new features. No more hacks to smuggle in user data into the eyedropper.

A note on that testing page app.js in the example folder, html2canvas cannot read blob url as images, all the user upload images would not be detected by the canvas, so that feature is kind of pointless right now.

jodhman commented 4 years ago

By the way, if you feel like you could use another pair of hands, go ahead and invite me as a collaborator on your forked project. I could help you address the comments written, so that we can merge this.

gundamftw commented 4 years ago

Okay I sent an invite, yeah I have little idea how this pull request work

gundamftw commented 4 years ago

Nooooo, we want html2canvas to make a screenshot of the the entire document, not only the area in the image tag. We want to be able to sample anywhere on the page.

jodhman commented 4 years ago

Don't worry, the old functionality is still intact. It's just that html2canvas doesn't support actual images. Therefore, if the target is an <img />, it will sample from the image and nothing else. If the target is anything else, it will revert back to whatever it did before.

gundamftw commented 4 years ago

No, html2canvas works with images no problem, I have been using it on my project already.

The only image source url that's not supported is that blob link created by the URL.createObjectURL() function, like the one from the example/App.js.

this work: <img src="http://abc.com/abc.jpg"/>

this doesn't work: <img src="blob:http://abc.com/abc-def" />

gundamftw commented 4 years ago

Oh nvm, I just tested your codes, it works now with blob too

jodhman commented 4 years ago

I appreciate your effort in this project. Your PR was a good change. 😁👍

gundamftw commented 4 years ago

I found a bug, now when setting once=true, when I start picking an image, the pick doesn't exit unless I click outside the image area.

jodhman commented 4 years ago

Ooo... Nice catch! Gonna verify this soon, and work out a fix.