File: index.html

Recommend this page to a friend!
  Classes of Andras Toth  >  Text Embedded Image  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: demo page
Class: Text Embedded Image
Embed text inside the data of an image
Author: By
Last change: encode text length to image, remove max char variable
Date: 6 years ago
Size: 7,437 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TextEmbeddedImage</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css" media="screen">
        .img-holder{margin:5px;padding-top:15px;cursor:pointer;border:2px solid #9400d3;min-height:150px;border-radius:4px}.thumbnail a>img,.thumbnail>img{height:150px;margin-right:auto;margin-left:auto}h4{overflow:hidden}
        textarea{min-height:150px;overflow:auto;width:100%}.well{min-height:20px;padding:5px}.container{text-align:center}pre{text-align:left;background:#2d2d2d;border:0}body{padding-bottom:15px}
    </style>
  </head>
  	<body>
		<h1 class="page-header text-center">Text Embedded Image</h1>
		<div class="container text-center">
			<div class="row">
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail" data-toggle="tooltip" data-placement="top" title="Click to image">
						<img src="mickey.png" alt="..." onclick="TextEmbeddedImage(this).OpenURL();">
						<div class="caption">
							<h3>Image</h3>
							<p>Embeding text to image data,using alpha channel.</p>
							<div class="form-group">
								<label for="usr">Text to encode:</label>
								<input type="text" class="form-control">
							</div>
							<p><a href="#" class="btn btn-primary" role="button">Encode</a> <a href="#" class="btn btn-danger" role="button">Decode</a></p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail" data-toggle="tooltip" data-placement="top" title="Click to image">
						<img src="336914de2a.png" alt="..." onclick="TextEmbeddedImage(this).OpenURL();">
						<div class="caption">
							<h3>Image</h3>
							<p>Embeding text to image data,using alpha channel.</p>
							<div class="form-group">
								<label for="usr">Text to encode:</label>
								<input type="text" class="form-control" value="http://atandrastoth.co.uk">
							</div>
							<p><a href="#" class="btn btn-primary" role="button">Encode</a> <a href="#" class="btn btn-danger" role="button">Decode</a></p>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail" data-toggle="tooltip" data-placement="top" title="Click to image">
						<img src="images.jpg" alt="..." onclick="TextEmbeddedImage(this).OpenURL();">
						<div class="caption">
							<h3>Image</h3>
							<p>Embeding text to image data,using alpha channel.</p>
							<div class="form-group">
								<label for="usr">Text to encode:</label>
								<input type="text" class="form-control">
							</div>
							<p><a href="#" class="btn btn-primary" role="button">Encode</a> <a href="#" class="btn btn-danger" role="button">Decode</a></p>
						</div>
					</div>
				</div>
			</div>
<div style="background: #272822; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #f92672">&lt;script&gt;</span>
<span style="color: #75715e">// Usage:</span>
<span style="color: #75715e">// Encode text to image</span>
<span style="color: #a6e22e">TextEmbeddedImage</span><span style="color: #f8f8f2">(document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;img&#39;</span><span style="color: #f8f8f2">)).</span><span style="color: #a6e22e">Encode</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;text&#39;</span><span style="color: #f8f8f2">);</span>
<span style="color: #75715e">// Decode text from image -&gt; return text</span>
<span style="color: #a6e22e">TextEmbeddedImage</span><span style="color: #f8f8f2">(document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;img&#39;</span><span style="color: #f8f8f2">)).</span><span style="color: #a6e22e">Decode</span><span style="color: #f8f8f2">();</span>
<span style="color: #75715e">// Decode text from image and if text is url navigate browser to url.</span>
<span style="color: #a6e22e">TextEmbeddedImage</span><span style="color: #f8f8f2">(document.</span><span style="color: #a6e22e">querySelector</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;img&#39;</span><span style="color: #f8f8f2">)).</span><span style="color: #a6e22e">OpenURL</span><span style="color: #f8f8f2">();</span>
<span style="color: #f92672">&lt;/script&gt;</span>
<span style="color: #f92672">&lt;img</span> <span style="color: #a6e22e">src=</span><span style="color: #e6db74">&quot;mickey.png&quot;</span> <span style="color: #a6e22e">alt=</span><span style="color: #e6db74">&quot;...&quot;</span> <span style="color: #a6e22e">onclick=</span><span style="color: #e6db74">&quot;TextEmbeddedImage(this).OpenURL();&quot;</span><span style="color: #f92672">&gt;</span>
</pre></div>
		</div>
		<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		<script type = "text/javascript">
                var TextEmbeddedImage = function(image) {
		    var canvas = document.createElement('canvas'),
		        ctx = canvas.getContext("2d"),
		        w, h;
		    var encode = function(text) {
		        w = canvas.width = image.naturalWidth;
		        h = canvas.height = image.naturalHeight;
		        ctx.drawImage(image, 0, 0);
		        var imageData = ctx.getImageData(0, 0, w, h);
		        var data = imageData.data;
		        data[3] = text.length;
		        for (var i = 4, j = 0; j < text.length; i += 4, j++) {
		            data[i + 3] = text.charCodeAt(j);
		        }
		        ctx.putImageData(imageData, 0, 0);
		        image.src = canvas.toDataURL();
		    };
		    var decode = function() {
		        w = canvas.width = image.naturalWidth;
		        h = canvas.height = image.naturalHeight;
		        ctx.drawImage(image, 0, 0);
		        var imageData = ctx.getImageData(0, 0, w, h);
		        var data = imageData.data;
		        var str = '';
		        for (var i = 4; i <= data[3] * 4; i += 4) {
		            str += String.fromCharCode(data[i + 3]);
		        }
		        return str;
		    };
		    return {
		        Encode: function(text) {
		            encode(text);
		        },
		        Decode: function() {
		            return decode();
		        },
		        OpenURL: function(func) {
		            var txt = decode();
		            var urlRegex = /(https?:\/\/[^\s]+)/g;
		            if (urlRegex.test(txt)) {
		                window.open(txt);
		            } else {
		                alert('Not found encoded URL!');
		            }
		        }
		    }
		};
	        $('.btn-primary').click(function(){
			var data =  $(this).parents('.caption').find('input').val();
			var img = $(this).parents('.thumbnail').find('img');
			TextEmbeddedImage(img[0]).Encode(data);
		});
		$('.btn-danger').click(function(){
			var img = $(this).parents('.thumbnail').find('img');
			alert(TextEmbeddedImage(img[0]).Decode());
		});
		$('[data-toggle="tooltip"]').tooltip();
		</script>
	</body>
</html>