Issue with transparent images

[luiz-brandao]

It seems that the component uses the original size of the image to calculate finishPercent instead of "canvas pixels". Can you confirm that?

Right now, I'm using a canvas size bigger than the size of the image, so the image gets resized. Because of that, if the image is small, the reveal is triggered very fast, sometimes only with a touch.

What would it take to use the canvas size instead of the image size to force the reveal?

I'm going to try to get a Codepen replication this issue as soon as possible. In the mean time, if you have any feedback regarding this, it would be great.

Thank you.

[alyoshark]

There is a stride parameter that I didn't understand fully from the original code I copied from. Once the codepen example is shared I'll definitely look into it. Thank you for pointing this out.

[luiz-brandao]

So I couldn't create a codepen using the vue component, so I created one using the original codepen that inspired this component. It turns out the issue is not with the size of the image itself, but with transparent images.

I tested with a very small image and everything seemed to work fine, but when the image is transparent, that's when the scratch doesn't work.

I'm not sure why someone would want to use a transparent image in the first place, but our QA here used a random image for testing and it happened to have transparency!

Here is the codepen with the image with transparency:
https://codepen.io/anon/pen/XGPWOZ

I haven't tried to fix that yet, I will try to take some time later to work on it. Let me know if you have any clue.

Thanks

[luiz-brandao]

Anyway, I'm just going to close this because the more I think, there is no point in using a transparent image if you want to do a scratch game.

[alyoshark]

You definitely have a point there. I'm not a ninja in canvas API either so would probably need collaboration effort from you too if we are pushing for transparent image support.

BTW kudos to your QA in spotting this issue haha 🤣

[stefandevo]

There is a stride parameter that I didn't understand fully from the original code I copied from. Once the codepen example is shared I'll definitely look into it. Thank you for pointing this out.

Not sure about term 'stride' but what is happening is, according to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas the result of the getImageData gives you an Uint8ClampedArray that contains height × width × 4 bytes of data. Then each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "RGBA" format).

By passing 32 as stride actually speeds up that evaluation of number of transparent pixels (by taking actually 8 pixels at the time and then using the 8th pixel). So this is not 100% correct but for this purpose (calculating the percentage) it is good enough.

BTW, check my #6 topic where you can add transparent support for the overlay image.