最近要准备一次组内分享关于canvas 的一个神奇的应用。
其实我对于canvas学过很多次，但是因为平常不咋用，就总是忘记。
估计这次分享后 还是忘记，，oudoukaji
分享内容来自这里，前端大全微信公众号的一篇文章。讲的是 隐写术，看上去是不是逼格很高。。
canvas 我没有用它写过动画，我日常切图工作的动画难度基本上css3那些就可以搞定。但是他有一个很厉害的地方就是可以获得图片每个像素的信息。就像我觉得svg很牛逼的地方就是 矢量图 不失真。
文章写得很仔细 我就不再写了
但是我想复习一下这些api。
我们在写css样式时 ，如果想实现透明效果，可以用opacity:0.5;但是也会这样 rgba(155,155,155,0.5);这四个值分别代表 红绿蓝及透明度。
通过canvas 可以帮助我们 巧妙地操作这些像素信息。
-
第一步，获取canvas的上下文对象
var ctx = document.getElementById('canvas').getContext('2d');
通过这个对象ctx，进而可以get/set画布。
打印出一个初始化的ctx
-
第二步，获取原始图片信息
<canvas id="canvas" width="640" height="640"></canvas>
ctx.drawImage(img, 0, 0,640,580,0,0,640,580);
orginalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
Paste_Image.png
ctx.drawImage(img, 0, 0,640,580);
Paste_Image.png
此时发现图像被挤压了，有一个问题 ，困扰我好久，图像挤压后，我脑洞打开觉得像素被挤成长方形了，其实是，图像在被挤压后，丢掉了一部分像素，这个解释 我觉得 还算合理。
返回 说这个api的参数。
w3c
Paste_Image.png
看一眼打印的图像信息。
Paste_Image.png
每四个一组，值得注意的是，我们知道rgba里面最后一个值只要大于1 都是不进行透明度设置的，这里如果默认为255，表示不透明。1表示完全透明，中间为不同程度的透明。其余三个为rgb。
-
第三步，获取隐藏文案的ImageData信息
ctx.font = '70px Microsoft Yahei';//这个语法和css语法一致
ctx.fillText('春风十里不如你', 60, 130);
filltext语法源自W3c
-
第四步，处理目标图片的数据，并生成图片
这样就得到了两组图像数据。因为这个案例是显示纯色的文字在纯色的背景上，所以作者想了一个巧妙的方法，对原来图片上对应到文字的部分的R通道为奇数，其他非文字区域的R通道为偶数。
ctx.putImageData(originalData, 0, 0);
Paste_Image.png
-
第五步，解密图片
这样当解密图片时 只需要对R通道的数据进行判断，进而附上颜色值。
对于文章一开头 举的例子，解密后是一张图片的。估计需要更复杂的算法。
【附加】
image.src = canvas.toDataURL("image/png");
注意：canvas为画布对象，而不是canvas上下文。
Paste_Image.png
支持两个参数 ，第一个是转化类型，第二个是压缩规模。
ps：canvas压缩不支持png压缩，如果要对png图片进行压缩需要先toDataURL为jpeg格式，注意的是 绘制画布之前 需要为画布铺上一层底色。否则png透明区域就为黑色啦。
最后将image，apend到dom树中就好了。
- 【附加】
上传本地图片
<input type="file" name="" id="ipt" value="ee" />
var reader = new FileReader(),
file = ipt.files[0];
reader.readAsDataURL(file);
reader.onload = function(){
var src = this.result;
var img = new Image();
img.src = src;
cxt.drawImage(img,0,0)
}
这是用到的几个文件上传的api
用到了FileReader对象，readAsDataURL这个方法会读取文件内容。当读取结束后，该对像的readystate变为done然后将读取结果已URL格式存储在FileReader对象的result属性上。
网友评论