Lorem Image Cryptonator: Embed encoded text in images using steganography

Recommend this page to a friend!
  Info   View files View files (6)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-01-05 (2 years ago) RSS 2.0 feedStarStarStar 52%Total: 211 All time: 222 This week: 14Up
Version License JavaScript version Categories
lorem-image 0.9.0BSD License1Graphics, Text processing
Description Author

This object can embed encoded text in images using steganography.

It takes a image object on a Web page and creates a canvas object from the image pixels, so it can alter the image to replace least significant bits of a red, green, blue or alpha channels with an encoded version of the text message.

It can do it either in a fast mode that uses less image pixels but also uses more color channels, or in slow mode that uses only one channel but it takes more pixels to encode the whole text.

The object can also do the opposite, i.e. extract a previously encoded text in an image object that used this object to embed the text.


Embed link URL in an image
Opens an URL when you click on an image

Innovation Award
JavaScript Programming Innovation award winner
March 2014
Steganography is a technique that uses one message to embed another message often in a way that is not easy to discover.

This object uses a steganography method to hide a text message inside an image. It can also extract and decode a text message previously hidden in an image.

Manuel Lemos
  Performance   Level  
Name: Franz Josef Brünner <contact>
Classes: 6 packages by
Country: Austria Austria
Age: 32
All time rank: 281 in Austria Austria
Week rank: 30 Down1 in Austria Austria Equal
Innovation award
Innovation award
Nominee: 5x

Winner: 4x


General-Description: <br/>

A JavaScript-package to insert some text into an image (*.jpg, *.png, *.gif) and extract some text from an image (Crypto-image).</br>

With help of this package an user can handle text that can be inserted in one of the fourth-pixel-channels (red, green, blue and alpha) within an image. Furthmore each signs of some text can be placed either on a LSB(least significant bit) of a channel or on a whole channel of a pixel itself.  The packages enables an user to extract text from an image that some text has been inserted before. This option of extracting text out of an image can be done on an HTML-Image-Element or on an Image-Object.

<h3>Supported Options:</h3>
The options below are

	<li>Necessary Options</li>
		<li><b>text</b>: String that should be inserted into a image.</li>
	<li>Optional Options:</li>
		<li><b>mode</b>: 'fast' and 'slow'. When mode 'fast' is selected each sign is put into a whole pixel. It's faster than 'slow' because 'slow' puts each bit of each sign into the LSB (least significant bit) of each pixel successively. When 'slow'-mode is selected each signs takes put eight pixel of the image partly but it has got a very low effect on the image. 
		      So 'fast'-mode is faster and has to alter less pixels of the image but depending on the text-size there is a chance that a user might see that some image-sections look different in comparison with other sections. Furthermore when using 'fast'-mode there can be saved more signs into an image than using 'slow'-mode.(Standard: 'slow')</li>
				Advantages of 'fast'-mode:
				<li>Faster while inserting each sign of some text</li>
				<li>Greater Number of signs can be stored in an image</li>
				<li>Alters less pixels of an image</li>
				Advantages of 'slow'-mode:
				<li>Very low effect on each pixel of an image.</li>
				<li>Cryptography is better, LSB of each pixels is altered and not whole pixel as it is the case with 'fast'-mode.</li>
		<li><b>channel</b>: 'red', 'green', 'blue' and 'alpha'. Text-signs can be put into red-, green-, blue- or alpha-channel of each pixel. It is recommended to use the alpha-channel because it's not likely that you see any visual-difference before and after some text has been inserted. (Standard: 'alpha')</li>

<h3>Useful Tips:</h3>

For those who want to store large quantities of text always keep in mind that the bigger the image is the more signs can be stored into and in this case the 'fast'-mode is recommended.

Szenario-Example when an image-Size of 480x320 size is used:
			<li>max. Number of signs:  153600 (480x320)</li>
			<li>max. Number of signs:  19200 ((480x320)/8)</li>

For those who want to mask text in an image the 'slow'-mode plus the channel alpha is recommended as these options are selected by default.


The package offers following methods:

<b>setImage</b> is used for overloading an image that get used for being inserted some text into. 


	<p>@param <i>img</i> must be an Image-Object</p>

	<p>@return undefined</p>
	<p><b>setImage( in img:Image ) : undefined</b></p>


<b>getCryptoImage</b> is used for inserting some text into an image. 


	<p>@param <i>opt</i> must be a JSON-Object and contains the options (text, mode and channel)</p>

	<p>@param <i>callback</i> must be a Function-Object that gets called when Crypto-image is ready to be viewed or inserted into HTML-Elements. The callback-function must define one param that represents the Crypto-Image after a successful text-insertion.</p>
	<p>@return undefined</p>
	<p><b>getCryptoImage( in opt:Object, in callback:Function ) : undefined</b></p>


<b>getTextFromCryptoImage</b> is used for extracting some text that has been inserted into an image.


	<p>@param <i>opt (optional)</i> must be a JSON-Object but can be omitted when standard options have been used to insert text into image.</p>
	<p>@param <i>cimg</i> must be an Image-Object that some text has been inserted into before.</p>
	<p>@return String that represents the inserted Text</p>
	<p><b>getTextFromCryptoImage( in opt:Object, in cimg:Image ) : String</b></p>


<h3>Supported Browsers:</h3>
	<li>Mozilla Firefox</li>
	<li>Google Chrome</li>

GNU: This software can be used and modified freely and without any restrictions. 
  Files folder image Files  
File Role Description
Files folder imageimg (1 file)
Files folder imagesrc (2 files)
Plain text file package.json Data notice of author and project
Plain text file README.md Doc. file with usage instructions
Plain text file Usage-Examples.js Example Two Examples for inserting and extracting text

  Files folder image Files  /  img  
File Role Description
  Image file aquarel.png Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
  Plain text file LoremImageCryptonator.js Class actual source-code uncompressed
  Plain text file LoremImageCryptonator.min.js Class actual source-code compressed

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:222
This week:14Up
 User Ratings  
 All time