crossai-2033 · June 24, 2013 09:55
diff --git a/js2image b/js2image
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
 	<title>Document</title>
 </head>
 <body>
 	<textarea name="base64" id="base64" cols="30" rows="10"></textarea>
 	<script>
 	function encodeUTF8(str) {  
 	    return String(str).replace(  
 	        /[\u0080-\u07ff]/g,  
 	        function(c) {  
 	            var cc = c.charCodeAt(0);  
 	            return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);  
 	        }  
 	    ).replace(  
 	        /[\u0800-\uffff]/g,  
 	        function(c) {  
 	            var cc = c.charCodeAt(0);  
 	            return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3f, 0x80 | cc & 0x3f);  
 	        }  
 	    );  
 	} 

 	function request(url, loaded) {
 		var xmlhttp = new XMLHttpRequest();
 		xmlhttp.onreadystatechange = function() {
 			if (xmlhttp.readyState == 4) {
 				if (xmlhttp.status == 200) {
 					loaded(xmlhttp);
 				}
 			}
 		};

 		xmlhttp.open("GET", url, true);
 		xmlhttp.send();
 	}

 	void function() {
 		var source = 'image.js';
 		request(source, function(xmlhttp) {
 			var text = encodeUTF8(xmlhttp.responseText);
 			var pixel = Math.ceil((text.length + 2) / 3);
 			var size = Math.ceil(Math.sqrt(pixel));

 			var canvas = document.createElement('canvas');
 			canvas.width = canvas.height = size;
 			var context = canvas.getContext('2d'),
 				imageData = context.getImageData(0, 0, canvas.width, canvas.height),
 				pixels = imageData.data;

 			for (var i = 0, j = 0, l = pixels.length; i < l; i++) {
 				if (i % 4 == 3) {
 					pixels[i] = 255;
 					continue;
 				}
 				var code = text.charCodeAt(j++);
 				if (isNaN(code)) { break; }
 				pixels[i] = code;
 			}				

 			context.putImageData(imageData, 0, 0);
 			document.getElementById('base64').value = canvas.toDataURL("image/png");
 		});
 	}();

 	// 读取使用
 	void function() {
 		var source = 'my.png';
 		var img = document.createElement('img');
 		img.onload = function() {
 			alert('');
 			var canvas = document.createElement('canvas');
 			canvas.width = img.width;
 			canvas.height = img.height;

 			var context = canvas.getContext("2d");
 			context.drawImage(img, 0, 0);
 			var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 			var pixels = imageData.data;

 			var script = document.createElement('script');
 			var buffer = [];
 			for (var i = 0, l = pixels.length; i < l; i++) {
 				if (i % 4 == 3) { continue; }
 				if (!pixels[i]) {break;}
 				buffer.push(String.fromCharCode(pixels[i]));
 			}

 			script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
 			console.log(script.src);
 			document.body.appendChild(script);
 			script.onload = function() {
 				show();
 			};
 			img = null;
 		};
 		img.src = source;
 	}();
 	</script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<textarea name="base64" id="base64" cols="30" rows="10"></textarea>
	<script>
	function encodeUTF8(str) {
	return String(str).replace(
	/[\u0080-\u07ff]/g,
	function(c) {
	var cc = c.charCodeAt(0);
	return String.fromCharCode(0xc0 \| cc >> 6, 0x80 \| cc & 0x3f);
	}
	).replace(
	/[\u0800-\uffff]/g,
	function(c) {
	var cc = c.charCodeAt(0);
	return String.fromCharCode(0xe0 \| cc >> 12, 0x80 \| cc >> 6 & 0x3f, 0x80 \| cc & 0x3f);
	}
	);
	}

	function request(url, loaded) {
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4) {
	if (xmlhttp.status == 200) {
	loaded(xmlhttp);
	}
	}
	};

	xmlhttp.open("GET", url, true);
	xmlhttp.send();
	}

	void function() {
	var source = 'image.js';
	request(source, function(xmlhttp) {
	var text = encodeUTF8(xmlhttp.responseText);
	var pixel = Math.ceil((text.length + 2) / 3);
	var size = Math.ceil(Math.sqrt(pixel));

	var canvas = document.createElement('canvas');
	canvas.width = canvas.height = size;
	var context = canvas.getContext('2d'),
	imageData = context.getImageData(0, 0, canvas.width, canvas.height),
	pixels = imageData.data;

	for (var i = 0, j = 0, l = pixels.length; i < l; i++) {
	if (i % 4 == 3) {
	pixels[i] = 255;
	continue;
	}
	var code = text.charCodeAt(j++);
	if (isNaN(code)) { break; }
	pixels[i] = code;
	}

	context.putImageData(imageData, 0, 0);
	document.getElementById('base64').value = canvas.toDataURL("image/png");
	});
	}();

	// 读取使用
	void function() {
	var source = 'my.png';
	var img = document.createElement('img');
	img.onload = function() {
	alert('');
	var canvas = document.createElement('canvas');
	canvas.width = img.width;
	canvas.height = img.height;

	var context = canvas.getContext("2d");
	context.drawImage(img, 0, 0);
	var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
	var pixels = imageData.data;

	var script = document.createElement('script');
	var buffer = [];
	for (var i = 0, l = pixels.length; i < l; i++) {
	if (i % 4 == 3) { continue; }
	if (!pixels[i]) {break;}
	buffer.push(String.fromCharCode(pixels[i]));
	}

	script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
	console.log(script.src);
	document.body.appendChild(script);
	script.onload = function() {
	show();
	};
	img = null;
	};
	img.src = source;
	}();
	</script>
	</body>
	</html>