canvas的一些api

2016-04-06 本文已影响685人 Miss____Du

最近要准备一次组内分享关于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树中就好了。