Skip to content
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

Sampling Canvas Data (getImageData) #27

Open
tortis opened this issue May 20, 2020 · 3 comments
Open

Sampling Canvas Data (getImageData) #27

tortis opened this issue May 20, 2020 · 3 comments

Comments

@tortis
Copy link

tortis commented May 20, 2020

First off, awesome package! I'm having fun with it so far.

I was curious if you had any plans for an API to get/put raw image data? It seems like might be possible with Texture, but I'm not too sure.

Thanks!

@joakin
Copy link
Owner

joakin commented May 20, 2020

Depending on what you are doing there may be different ways of going about it.

If you just want to read the canvas pixels and calculate things, I recommend using ports and doing so on JS, because Elm doesn't support converting Uint8ClampedArray from JS easily to elm-bytes.

If you want to paint ImageData into the canvas, either

  1. do it in JS every time after you render in Elm (with a requestAnimationFrame to let Elm flush updates to the DOM),
  2. or you can put your imageData in to a hidden canvas, make an Image with ctx.toDataURL and then pass it back to Elm and use Texture.fromDomImage to draw to the canvas in Elm.

If you explain your use case and it is important to add first class support in the library, we can talk about adding other Texture.fromXXX methods, in this case something like Texture.fromImageData or something like that.

@tortis
Copy link
Author

tortis commented May 20, 2020

I'm hoping to implement a flood fill tool on top of your drawing example. I guess I could send the message through a port then implement it in javascript, but it would be nice if I could write it in elm.

Do you think using a port to pass image data as array into Elm, doing the flood fill, then passing the image data back to JS to put onto the canvas would work? Do you think that would have poor performance?

Thanks for your help!

@janwirth
Copy link

janwirth commented Jun 14, 2020

@tortis I usually monkey-patch elements to exhibit specific getters for the stuff I want in elm. Then I listen to events and use event.target to get the data.

Example:
    HTMLElement.prototype.__defineGetter__("boundingClientRect", function() {
        return this.getBoundingClientRect();
    });

Within the hander you can also call ctx.toDataURL or whatever you please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants