web开发

首页web开发
22
Apr
0

微信公众号页面的两种排布方式

  1. 网页模式
    此种模式,就是按普通网页模板方式,适合网站页面很多的方式

有header ,footer等通用元素

  1. APP模式
    此种模式,包含底部导航栏等信息,缺点是所有东西加载到一个页面,会很臃肿,

但也可以用异步加载方式来减少这种情况.它分为页面部分和导航按钮两个部门,用id号关联
<div class="weui-tab">
<div class="weui-tab__bd">

<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
  <h1>页面一</h1>
</div>
<div id="tab2" class="weui-tab__bd-item">
  <h1>页面二</h1>
</div>

</div>

<div class="weui-tabbar">

<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
  页面一
</a>
<a href="#tab2" class="weui-tabbar__item">
  页面二
</a>

</div>
</div>

11
Aug
0

基于HTML Canvas实现“指纹识别”技术

原理
基于Canvas绘制特定内容的图片,使用canvas.toDataURL()方法返回该图片内容的base64编码字符串。对于PNG文件格式,以块(chunk)划分,最后一块是一段32位的CRC校验,提取这段CRC校验码便可以用于用户的唯一标识。

测试结果表明,同一浏览器访问该域时生成的CRC校验码总是不变。可以简单理解为同样的HTML Canvas元素绘制操作,在不同的操作系统不同的浏览器上,产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因:

在图片格式上,不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
在像素级别来看,操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。
即使是相同的绘图操作,最终产生的图片数据在hash层面上依然是不同的。
实现
function bin2hex(s) {
// discuss at: http://phpjs.org/functions/bin2hex/
// original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// bugfixed by: Onno Marsman
// bugfixed by: Linuxworld
// improved by: ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)
// example 1: bin2hex('Kev');
// returns 1: '4b6576'
// example 2: bin2hex(String.fromCharCode(0x00));
// returns 2: '00'

var i, l, o = '',

n;

s += '';

for (i = 0, l = s.length; i < l; i++) {

n = s.charCodeAt(i)
  .toString(16);
o += n.length < 2 ? '0' + n : n;

}

return o;
}

function getUUID(domain) {

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var txt = domain;
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.textBaseline = "tencent";
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText(txt, 4, 17);

var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16,-12));
return crc;

}

console.log(getUUID("http://m.vip.com/"));
优点
基于HTML Canvas生成的UUID可以有效的用于用户追踪技术,目前并没有有效的对抗方案。