<!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"><script></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">'img'</span><span style="color: #f8f8f2">)).</span><span style="color: #a6e22e">Encode</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'text'</span><span style="color: #f8f8f2">);</span>
<span style="color: #75715e">// Decode text from image -> 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">'img'</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">'img'</span><span style="color: #f8f8f2">)).</span><span style="color: #a6e22e">OpenURL</span><span style="color: #f8f8f2">();</span>
<span style="color: #f92672"></script></span>
<span style="color: #f92672"><img</span> <span style="color: #a6e22e">src=</span><span style="color: #e6db74">"mickey.png"</span> <span style="color: #a6e22e">alt=</span><span style="color: #e6db74">"..."</span> <span style="color: #a6e22e">onclick=</span><span style="color: #e6db74">"TextEmbeddedImage(this).OpenURL();"</span><span style="color: #f92672">></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>
|
Download
