简单的将一副图片隐藏进另一幅图片中

之前完成腾讯《前端突击队》第二季的挑战最后一题就涉及了图像的处理,虽然是很简单的图像二值化,但我还是很感兴趣的。顺带学习了如何通过js操纵<canvas>中的图像,做了一个在浏览器中加密和解密图像的页面,并实现了直接拖拽本地图片的功能,参照了以下的资料。其中涉及到了js读取本地图片,图片转化为base64,操作<canvas>的各种方法等等~~

  1. 本机 HTML5 拖放

  2. Reading files in JavaScript using the File APIs

  3. HTML5 drag & drop 拖拽与拖放简介

  4. 提升用户体验:HTML5 拖放文件上传

简单的做出来了这个页面/project/img.html,将你要隐藏的图片和隐藏到的那张图片拖到相应的位置,encode得到加密的图片,decode解密。

改进下,还可以用canvas做一个写字板,然后可以将写字板的内容隐藏到图片中。并可以进行解密。

Tag:前端javascript Published under (CC) BY-NC-SA