Skip to content

This program uses canvas imageData to Generate a binary representation of an image, based on the alpha property.

License

Notifications You must be signed in to change notification settings

ogbuaguwizard/mask

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mask:

Generates a binary representation of an image based on the alpha property

VanillaJS version License

Update

Release Date: 07/12/2022

Features

  • Enabled Selection of multiple images

About

Autor : Ogbuagu Francis

This program uses canvas imageData to Generate a binary representation of an image, based on the alpha property. It was originally developed to test for pixel perfect collision between objects in html5 canvas game against the use of canvas' imageData method in the game programe. But there are probably other problems out there this program might inspire a solution to.

How to use

Click on the Choose Img button and select the image to be converted, Choose image resolution by checking the radio button or use the original resolution(which will be visible after an image has been selected), Click Generate button and the result will be downloaded as a .txt file. You can copy the content of this file and use in your project, or any other way you've discovered to use this file.

Note: Incase of collision detection in Html5 canvas, the chosen resolution has to match the width and height of object drawn on the canvas, not neccesarily the original resolution.

Example

Image vs Result

Image vs Result Image vs Result

Practical Example

Convert an image with some transparent area yourself, click here. Zoom out on the generated text to clearly see the 1s form the chosen image.

Check out this project where a generated mask was used to test for collision between two object.

Share your thought/experience

You can send me an email , or reach out to me on twitter

Appreciation

Thanks for checking out the project, if you like the project please give it a star.

Support the project

paypal

Email

About

This program uses canvas imageData to Generate a binary representation of an image, based on the alpha property.

Resources

License

Stars

Watchers

Forks

Packages

No packages published