便于发车的小工具
地址:https://github.com/JiaJiaJiang/toDataURI
选择文本或者文件模式,填好内容或者选择文件
可自定义Content type,一般空着就好
然后点转换。
即可发车。
转换结果让别人粘贴在浏览器地址栏即可。
便于发车的小工具
地址:https://github.com/JiaJiaJiang/toDataURI
选择文本或者文件模式,填好内容或者选择文件
可自定义Content type,一般空着就好
然后点转换。
即可发车。
转换结果让别人粘贴在浏览器地址栏即可。
Demo:http://pages.luojia.me/image-diff/
用于对两张图片进行像素对比,相同的像素结果为白色,不同的像素结果为黑色。
做这个东西是因为某群在讨论QQ的火炬传递页面到底有没有藏什么东西,为了证明它们真的是一模一样的图片,我就做了这东西。。。
用javascript写了个base32的编解码函数
const charTable=[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '=' ],allowedPeddingCount=[6,4,3,1,0]; function str_split(str,length){ if(typeof str !== 'string')return []; let a=[],i=0; length||(length=1); do{ a.push(str.substr(i,length)); i+=length; }while(i<str.length); return a; } const Base32={ encode:function(str,padding){ if(!str)return ''; let binaryString=''; for (let i = 0;i<str.length;i++) { let bin=str.charCodeAt(i).toString(2); binaryString+=('0'.repeat(8-bin.length)+bin); } let fiveBitBinaryArray=str_split(binaryString,5),base32=''; for(let i=0;i<fiveBitBinaryArray.length;i++){ let bin=fiveBitBinaryArray[i]; base32+=charTable[parseInt(bin+'0'.repeat(5-bin.length),2)]; } let x=binaryString.length%40; if (padding && x != 0) { if (x == 8)base32+=charTable[32].repeat(6); else if(x===16)base32+=charTable[32].repeat(4); else if(x===24)base32+=charTable[32].repeat(3); else if(x===32)base32+=charTable[32]; } return base32; }, decode:function(str){ if(!str)return ''; let paddingMatch=str.match(/\=+$/), paddingCharCount=paddingMatch?paddingMatch[0].length:0; if(allowedPeddingCount.indexOf(paddingCharCount)<0)return false; for (let i=0;i<4;i++){ if (paddingCharCount===allowedPeddingCount[i] && str.substr(-(allowedPeddingCount[i]))!=charTable[32].repeat(allowedPeddingCount[i])) return false; } str=str.replace(/\=+$/,''); let binaryString = ""; for (let i=0;i<str.length;i+=8) { let x=''; if (charTable.indexOf(str[i])<0)return false; for (let j=0;j<8;j++) { let bin=charTable.indexOf(str[i+j]).toString(2); x+='0'.repeat(5-bin.length)+bin; } let eightBits=str_split(x,8); for (let z = 0; z < eightBits.length; z++) { let y,cd=parseInt(eightBits[z],2,10); binaryString+=((y=String.fromCharCode(cd))||cd==48)?y:""; } } return binaryString; } }
用一个看起来似乎有点不恰当的办法,用Error对象
(new Error).stack
获取到的是字符串形式的调用栈。
不知道还有没有其它办法来获得调用栈。
由于解决这个问题花了我一些时间,所以记录一下说不定可以帮到其他人。
process.stdout是一个getter,所以我们不能用普通的替换来换掉process.stdout来拦截写入它的数据。同时,process.stdout是一个Writable Stream,所以也不能简单地直接从它里面获取写入的数据。
一开始我花了不少时间来研究怎么可以从这个Writable Stream里读出数据,但是这似乎太麻烦了,然后我甚至想到了利用child process来拦截数据。最后发现其实很简单,我们只要重新定义这个Getter就可以了。
var stream=require('stream'); var rawStdout=process.stdout,//先拿到原来的stdout newStdout=new stream.PassThrough();//创建一个passthrough流,这是一种特殊的Transform流,会直接把写入的数据吐出来 process.__defineGetter__('stdout',function(){//重新定义process.stdout的Getter return newStdout;//返回我们的passthrough流 });
这样我们就成功拦截到标准输出了,要注意,这段代码必须放在有任何输出之前,一旦在之前有了内容输出,它就没用了。
然后我们就可以自己决定怎么处理stdout了比如:
newStdout.pipe(rawStdout);//内容输出到控制台 newStdout.pipe(文件的writable stream);//内容写入文件 newStdout.pipe(其它可写流);//随你怎么处理
同理,process.stderr也可以这样拦截
var a=[123,234,345,567]; a.length=0;//清空了
上面的清空方式虽然非常不合字面含义,不过还确实清空了。。。
var a=[123,234,345,456]; a.splice(0);//清空了
这方法倒是符合字面含义了,不过这个操作会返回整个一个新的数组,所以可能性能不如上面的一种方法。
虽然我以前就吃过一次这个亏,不过昨天又犯这错误了。
虽然js里万物皆对象,不过也不是啥对象都可以加属性的,比如字符串。
var qweq='asdasdasdas'; qweq.miao=123; console.log(qweq.miao)//undefined
所以字符串是没法添加属性的,同理,数字、Boolean也不能添加属性。
我发现它们都是传值型变量诶。因为本体只有一个值,所以不能添加属性吗。
这种函数虽然百度一大把,不过我还是准备自己用很简单的代码写一个。现在访客暴涨然后我发现了在线人数显示功能好多bug,修了一下午。这个函数也是为此功能而写的。
function formatNum(num){ if(typeof num !=="number")return false;//判断是否是数字 num=num.toString();//字符化 var s=num.match(/e\+(\d+)$/),ext=0;; num=num.replace(/e.+$/,''); if(s)ext=Number(s[1]); //分割小数点两边 var tA=num.split('.'); if(tA.length>=2&&ext){//有小数点则分割开来处理(小数点后面可能还跟有科学记数法表示) if(tA.length>ext){ tA[0]+=tA[1].slice(0,ext-1); tA[1]=tA[1].slice(ext-1,tA[1].length-1); }else{ tA[0]+=(tA[1]+"0".repeat(ext-tA.length)); tA[1]=''; } } tA[0]=tA[0].split('');//拆字符 for(var i=tA[0].length;(i-=3)>0;){//插逗号 tA[0].splice(i,0,','); } return tA[0].join('')+(tA[1]?'.'+tA[1]:'');//连起来 }
示例
> formatNum(652342938443) < "652,342,938,443" > formatNum(98765424621365764512) < "98,765,424,621,365,770,000" //由于js最大能准确表示的数字为9,007,199,254,740,992,所以会得到这个结果 > formatNum(98765424621365764512465421654165343687117361543861243) < "987,654,246,213,657,700,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000" //由于原数在js中会转为科学记数法,所以用0替换 > formatNum(0.55555555555555555555555555555555555555555555555555555) < "0.5555555555555556" //小数点后没有千分位 > formatNum(98765424621.365764512465421654165343687117361543861243) < "98,765,424,621.36577" //同上
欢迎来到佳佳doubi小课堂~在这里你可以学到实用又错误的知识×。
好久没写正经的博文了,让我来正经一下。
使用Generator函数来创建你的异步函数,先说明一下原理。
Generator函数是ES6里的新函数类型,函数定义写作这样
function* a(){ … }
看到没,在函数名和function之间多了一个*号,这不是我写错了,是Generator函数的标志,这个*号其实也可以贴着函数名写`function *a(){}`,也可以不加空格`function*a(){}`,不过还是推荐把它贴着function写,这样既不会影响一些编辑器里的高亮,也不会降低代码可读性。 继续阅读[Javascript]使用Generator函数创建你自己的异步函数
花了点时间好好做了个可以清理js文件的php脚本,php确实是个蛋疼的东西,老是出点奇怪的特性。
这个脚本的功能是去掉js文件里的无用部分,输出一个清洁的js文件(当然我不保证这个输出的文件绝对没问题,至少把我的COL放进去输出的文件没问题)
原理:
由于涉及到清理注释,又不能把引号误删,而且 `”` `’` `//` `/*`这四个关键符号是同样优先级的,所以谁先出现,谁的优先级就会高(也就是其他符号都会进入这个符号的作用域里)
比如`”` 先出现了,后面的`’` `//` `/*`都会被包括进这个字符串里,同样如果`/*`先出现了后面的内容都会变成注释,除非碰到`*/` 。
所以我用了个循环来根据先出现的符号进行相应操作。碰到引号就把字符串整个提出来放个锚,即可保持字符串内容,然后就不用再担心字符串的问题了。
很久很久以前,有一个叫Array的魔王占领着javascript的数组宝座,垄断了一切形式的数组。它能屈能伸,功能齐全,也不挑食,什么类型的数据都吃。
直到有一天,ArrayBuffer家族踏上了这片土地,Array的安宁被打破了。
刚刚我无聊在浏览器控制台里打了一句
null==0
浏览器返回false
于是我又打了一句
null>=0
浏览器竟然返回了true!
你他喵在逗我?
由于我的js没有正规学习过,所以码东西的时候总会有一些新发现,这两天写弹幕播放器的时候我又发现了定时函数的新用法,于是来记录一下。
一开始我从w3school学习了setTimeout的基本用法,他的例子是这样的
<html> <head> <script type="text/javascript"> function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()"> </form> </body> </html>
于是我后来就一直用引号围起要定时运行的内容。。。。。
继续阅读setTimeout和setInterval的用法
做了个canvas文字测试,看看效果如何。
由于代码中包含了图片的base64码所以放在最后了,测试结果如下:
//代码内容:一张写了5个蓝色喵的图片和5个无任何样式的喵字各绘制十万次 123.8950000006298 //图片 153.4990000000107 //文字 91.63100000114355 //图片 150.8400000002439 //文字 88.55799999946612 //图片 150.93399999932444 //文字 88.62000000044645 //图片 150.16500000092492 //文字 87.77499999996508 //图片 149.93399999912072 //文字 87.90600000065751 //图片 149.8909999991156 //文字 87.98000000024331 //图片 65.1319999997213 //文字
为了尽量准确一点,避免浏览器热身等原因我把测试放在循环里进行多次测试。
可见文字渲染确实是效率比较低的,不过这里还不是太明显。
这里的文字渲染还是无任何样式的,平常应用的时候不可能就这么用没样式的字,所以我还要再来一个有样式文字渲染测试。
继续阅读Canvas文字绘制性能测试
网上的大多数文档里都没有说视频(video对象)可以绘制到canvas上面,提到canvas的drawImage方法的时候都只提到了把Image对象和canvas对象绘制到canvas上,于是我这个熊孩子就把video对象也拿来试了试,果然也是可以的。
打开一首歌然后用鼠标点一下这个鼓,接着就尽情的按zxcv吧!