8093
Hidden within pixels
INSTRUCTIONS
This is an web-app for hiding messages and data within images. Here are some (hopefully) simple and understandable steps in order to use it properly. (If you are not completely new to the internet, it could be overly simple and a bit painful to read as I've tried to write it for a general audience. My apologies for the inconvenience)
This will only work with newer web-browsers, so it's recommended you have Google Chrome (other web-browsers might work as well, as long as they've got the same canvas and file API support as Chrome)
First of all, you'll need a PNG-image (an image with .png at the end of the name). Drag the selected image onto this site, and you'll see it appear in the square on the right. If this doesn't work, you'll need a different browser.
In order to hide information in the image, all you need to do is write some text it the large text field (the one with 'what is five times nine?' as placeholder text) and press "Hide".
The image on the right should now have your message inside it, and you can right-click on the image and click 'Save Image As' in order to download the image. The new image could be sent to others, who in turn could read it by following the steps below on how to read the hidden information.
To read the hidden information from the loaded image, simply press "Seek" and the hidden message - given it was made with the default values - will appear in the large text field. If you've got a text string in the pattern [#hidden-with:rgb#X#Y#Z#], simply add it to the large text field, and its values will be used. More on the pattern below.
There are a few optional methods to prevent unwanted people from reading your hidden messages, each with a higher level of security and which can be combined at your wish. The simplest method is the four colored squares between the text field and the image. These represent the red(R), green(G), blue(B) and transparency(A for alpha) values of each pixel. Any combination of one or more of these will decide in which values to hide the message. Due to the few possible combinations, they are not good at preventing people from reading the messages.
The second method is the two smaller text fields with 'x' and 'y' as placeholder texts. These values determine the coordinate (x,y) in the image where the first part of the message is going to be hidden. Left blank or without numbers gives the default values of half the width and height of the image. This gives a lot more combinations, but still, it's relatively easy to try all combinations within a short period of time.
The last method requires some knowledge of either programming or math. It's written in the 'z' text field and takes a JavaScript function as input (ex: 'function(i){return i*2}' or 'function (i){return (i%2)?i:-i;}') which returns the pixel position relative to (x,y) to store i'th part of you message (the (x,y) position is represented in a 1d array). Any working JavaScript code within the function can be used, with the requirements that the function z(i) should return an integer (it will be floored) and not the same integer twice for i from 0 to about four times the size of your message (depending on the rgb settings). The app will notify you if it thinks it returns the same value twice or if there won't be enough space in the image to hide with the current setting.
For the sake of easy sharing of these methods, it's implemeneted a shortcut for adding them. By writing the expression '[#hidden-with:rgb#X#Y#Z#]' (Replace rgb with the chosen R,G,B and A boxes, X with the X value, Y with the Y value and Z with the Z function) in the large text field, the app will set those values as your settings both when hiding and reading and will not be part of the message. Such an expression with the current settings should appear in green text below the text fields, which makes it easier to share your 'key' with others or store it on your computer.
Due to Canvas security issues, there is no support for images from external servers. There's only two methods (that I can think of) which'll make this possible, the first is copy-pasting the PNG data URL, and the other is to fetch the image through server side code. As the former would be both bothersome for the user, the latter would be hard on the server and both would be too time consuming, I have chosen to implement neither. Therefore, download, drag and drop is the way to go for now.
Thank you for taking the time to look at my little staganography/cryptography app. Questions, suggestions, critique, opinions and comments in general are well appreciated, though you'd have to go through mail, as this page lacks a comment section.