Magic PNG&canvas

DEMO

IE系全部不支持

chrome, firefox, opera 支持

WIN版safari:如果页面的 onload 事件发生的比更改favicon晚一会儿，则起效。DEMO for safari on windows

via remy sharp's b:log

• Lossless data compression(very important!)
• 主流浏览器都兼容它
• 主流编程语言图形库的支持
• 常用PNG8 和 PNG24 两种模式
• Read More  WIKI    PNG Home Site

又轮到 canvas 发威了！

让我们看看context.getImageData() 这个函数能返回给我们什么吧

另外不要忘记 js 有个 fromCharCode() 方法。

使用方法 String.fromCharCode(num,num,num...) 。

根据unicode编码返回字符串

我们有办法获取到图片每个像素的 RGBA 值，而且每个值都是不大于256的数字。

我们又有办法根据一个数字返回unicode中它对应的字符。

现在你知道该怎么把字符串打包进PNG了吗？

header("Content-type: image/png");
$path=$_GET['path'];
if($path){
	encode_file($path);
}

function encode_file($path){
	$data = file_get_contents($path);
	$size = strlen($data);
	#
	# the simplest method is to store the bytes as they are in ascii.
	# this is the least space-efficient.
	#
	$bytes = array();
	for ($i=0; $i<strlen($data); $i++){
		$bytes[] = ord(substr($data, $i, 1)); 
# @mdthod ord || int ord ( string $string ) 
# Returns the ASCII value of the first character of string . 
	}
	encode_bytes($bytes);
}
				

function encode_bytes($bytes){
	$size = count($bytes);
	$px = ceil($size / 3);
	$w = floor(sqrt($px));
	$h = ceil($px / $w);
	
	$im = imagecreatetruecolor($w, $h);
	imageAlphaBlending($im, false);
	imageSaveAlpha($im, false);
	
	$i=0;
	for ($y=0; $y<$h; $y++){
		for ($x=0; $x<$w; $x++){

			$b1 = $bytes[($i*3)+0];
			$b2 = $bytes[($i*3)+1];
			$b3 = $bytes[($i*3)+2];
			$col = imagecolorallocate($im, $b1, $b2, $b3);
			imagesetpixel($im, $x, $y, $col);

			$i++;
		}
	}
	imagepng($im);
	imagedestroy($im);
}
				

下面是我们的 fdev.js 按照此方式编码后的图。

<img src="./packstream.php?path=
http://style.china.alibaba.com/js/lib/fdev-v3/core/fdev-min.js" alt="fdev" />