将js/css脚本放到png图片中的实践。

起因
高级浏览器支持data协议,如:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"/>
<script   src = "data:text/javascript;base64,YWxlcnQoJ2h0dHA6Ly93ZWliby5jb20venN3YW5nJyk7" ></script>
不光是<img>标签,<script>、<style>、<iframe>也都支持data协议;
data协议可以表示图片、文本、音视频等各种二进制数据
另html5的canvas除了绘制图像,还能读写每一个像素值
一种把脚本存到图像中的思路就有了。

经过
最初的尝试就是把每个字符挨个放到像素的r、g、b、a里
需要处理的问题:
1、计算图片的尺寸;
     本来想用高度为1,宽度为字符串长度的尺寸,但考虑到压缩比和美观,所以决定生成正方形。
         var  pixel = Math.ceil((text.length +  3 ) /  4 );
         var  size = Math.ceil(Math.sqrt(pixel));
2、每个字符unicode编码,可能会超出255;
     那就得将字符串转成ascii码
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 );
        }
    );
}
3、还得考虑异步的问题
     var  img = document.createElement( 'img' );
    img.onload =  function (){
        //... ;
    }

第一轮demo做完,结果测试不符合预期。跟踪发现:还原的数据和编码的数据相差较大。
开始在怀疑是不是img标签绘制到canvas变成了有损压缩,如果真是这样,那整个方案就是不可行;
坚持“不抛弃,不放弃”+定位问题最简化的原则,逐步缩小范围,最终锁定是由于alpha值影响还原。
解决方案就是:一个像素存放三个字符并将alpha固定为255。

第二轮demo测试符合预期。

总结
build流程:
1、字符串转换成ascii码;
2、创建足够存储空间的canvas;
3、将字符填入到像素中(忽略alpha值);
4、获取data url;
     canvas.toDataURL( "image/png" );
5、存为png图片。
代码示例
<textarea id="base64"></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 = 'tangram-1.5.0.js';
	request(source, function(xmlhttp){
		var text = encodeUTF8(xmlhttp.responseText);
		var pixel = Math.ceil((text.length + 2) / 3); // 1一个像素存3个字节,
		var size = Math.ceil(Math.sqrt(pixel));
		//console.log([text.length, pixel, size, size * size * 3]);
		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) { // alpha会影响png还原
				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");
	});
}();
</script>
编译结果


调用流程:
1、加载png;
2、将png原尺寸绘制到canvas中;
3、读取像素中的字符串;
4、生成相应协议的data url使用。
代码示例
<script>
void function(){
	var source = 'tangram-1.5.0.png';
	var img = document.createElement('img');
	img.onload = function(){
		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),
			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; // alpha会影响png还原
			if (!pixels[i]) break;
			buffer.push(String.fromCharCode(pixels[i]));
		}
		script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
		document.body.appendChild(script);
		script.onload = function(){
			alert(T.date.format(new Date, 'yyyy年M月d日'));
		}
		img = null;
	}
	img.src = source;
}();
</script>



优势
1、压缩率大(50%);
2、隐蔽性相对高;
     可以设计加密的脚本,用公钥解锁;
3、减少网络请求;
     可以将多个图片、脚本放到一个png里,囧;
4、一种二进制处理文本的思路。

劣势
1、解码会使用更多的cpu,导致加载缓慢;
2、不支持低端浏览器;
3、开发维护成本更高。

总结
1、不具实战性;
2、在数据加密传输方面可以近一步研究。

相关demo
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值