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

Applying small mask on big image #2531

Closed
DanieleSassoli opened this issue Oct 7, 2015 · 6 comments
Closed

Applying small mask on big image #2531

DanieleSassoli opened this issue Oct 7, 2015 · 6 comments

Comments

@DanieleSassoli
Copy link
Contributor

Hi,
I'm trying to apply a mask on an image. If the mask is of the same size of the image everything works fine, but when I use a bigger image, the output is incorrect.
I've created 2 fiddles, one with the correct image and one with the big image.
I think the problem could be in:

for ( i = 0; i < imageData.width * imageData.height * 4; i += 4 ) {
     data[ i + 3 ] = maskData[ i + channel ];
}
context.putImageData( imageData, 0, 0 );

Because it iterates over imageDatawidth * imageDataHeight which is 1600 * 1200, instead the mask is only 375 * 375, so probably this is the problem. I'll work on this, but in the meantime I was wondering if I'm mistaking something o if someone else has already find a solution?

@DanieleSassoli
Copy link
Contributor Author

I managed to solve this issue, here is a working fiddle.
All I did was drawing the mask on a canvas as big as the image and then putting the canvas inside maskData, at this point the iteration dosn't exceed the limits of maskData anymore(because it's as big as the image) and the mask is applied correctly. If this is considered an issue, and this is the correct fix, I'll be glad to submit it.

@asturur
Copy link
Member

asturur commented Oct 9, 2015

I did not give you any comment yet, i did not have time to check how mask is supposed to work.
What happens if a small small image is used as mask? does it get stretched to full canvas now? is this a desired behaviour?

@DanieleSassoli
Copy link
Contributor Author

Basically if the image is 1600 * 1200 and the mask is 375 * 375, the mask gets applyed only on the first 375 * 375 pixels of the original image, I changed this and now the mask is applied correctly because I draw it on a canvas big as the orignal image before applying it. So this is what happens in the fiddle.
In real life, I have a custom image class(which I think I will create a pool request for, sooner or later)
that allows you to modify the image without stretching it, and you can even crop and clip the image with ease, this is relevant because I'm struggling with applying the mask on clipped images, once I have solved this issue I'll see if I can create a pull request, so you can see what I've done, and if it's interesting for other users.

@asturur
Copy link
Member

asturur commented Oct 9, 2015

i think your solution here is correct.

@DanieleSassoli
Copy link
Contributor Author

I've already created the pull request with this fix.

@asturur
Copy link
Member

asturur commented Oct 9, 2015

yes i was refferring to that.

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

2 participants