f8g

2010/09/18

ImageData callback

イマドキなデータのやりとり。

server.php

<?php
$q = str_split($_GET["q"]);

$data = array();

foreach($q as $c){
	$n = ord($c);

	if($n > 255){
		exit("cannot support charactor '" . $c . "'");
	}
	else{
		$data[] = $n;
	}
}

$v_n = count($data);
$px_n = ceil($v_n / 3);
$img = imagecreate($px_n, 1);
$i = 0;
$x = 0;

while($x < $px_n){
	$px = imagecolorallocate(
		$img,
		array_key_exists($i++, $data) ? $data[$i - 1] : 0,
		array_key_exists($i++, $data) ? $data[$i - 1] : 0,
		array_key_exists($i++, $data) ? $data[$i - 1] : 0
	);

	imagesetpixel($img, $x++, 0, $px);
}

header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>

client.html

<html>
<head>
<title>client</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");

var data = {a: 1, b: 2, c: 3};
var img = new Image;

img.onload = function(){
	var w = canvas.width = img.naturalWidth;
	var h = canvas.height = img.naturalHeight;
	context.drawImage(img, 0, 0);
	var data = context.getImageData(0, 0, w, h).data;
	console.log(ImageDataToData(data));
};

img.src = "server.php?q=" + encodeURIComponent(JSON.stringify(data));

function ImageDataToData(data){
	var d = [data[i] for(i in data) if((i * 1 + 1) % 4 && data[i])];
	var str = String.fromCharCode.apply(null, d);
	return JSON.parse(str);
}
</script>
</body>
</html>

利点なし。

コメントを書く

トラックバック - http://d.hatena.ne.jp/arikui/20100918

2010/05/18

Selectorの話し

Javascript | 21:46

	firefox	GChrome	IE8	opera
#foo .bar	636	512	432	551
.bar	493	262	435	336
#foo a	597	320	390	561
#foo *	619	280	384	530
span.bar	386	170	240	217

<html>
<head><title>test</title>
<script type="text/javascript">
window.onload = function(){
	var selectors = [
		"#foo .bar",
		".bar",
		"#foo a",
		"#foo *",
		"span.bar",
	];

	var test = function(selector){
		return function(){
			var s = new Date;
			for(var i = 0; i < 10000; i++)
				document.body.querySelectorAll(selector);
			console.log(selector + ": " + (new Date - s));
		};
	};

	for(var i = -1, selector; selector = selectors[++i];)
		setTimeout(test(selector), 1);
};
</script>
</head>
<body>
<div id="foo">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
<a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar"></a><a class="bar">
</div>
</body>
</html>

コメントを書く

トラックバック - http://d.hatena.ne.jp/arikui/20100518