周末在家就是应该放松的，我的放松手段很简单，就是学习前端知识，写写文章，抽个时间去钓鱼，完美。
本文内容就是一个临时起意的折腾，一个对JS，CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片，以及如何解密等。
希望本文的内容对您的学习有所帮助。
“JS实例”目录存档
瞎折腾：把JS,CSS任意文本文件加密成一张图片
2017年12月24日，星期日使用canvas实现和HTML5 video交互的弹幕效果
2017年09月10日，星期日本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。
iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
2017年08月24日，星期四前端代码效果实时预览的需求实际上是非常常见的，传统做法是这样子的，会新建一个另外的独立页面，专门用来接收传入的前端代码，通过新开窗口或者嵌入iframe页面的方式达到最终效果，然而实际上，对于这个预览效果，如果代码是我们自己控制，而不是全权交给用户编辑的，是没有必要新建一个另外的预览页面，亦或者是在新窗口（新标签页）中浏览的。可以直接在当前页面构建一个文档上下文，实现更加方便快捷的预览。
HTML5 file API加canvas实现图片前端JS压缩并上传
2017年07月30日，星期日很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过2M几乎是标配，此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像，就会遇到因为图片大小限制而不能上传的窘境，不得不对图片进行再处理，而这种体验其实非常不好的。如果可以在前端进行压缩，就不会有这种尺寸限制的问题，自然用户体验就可以大大提升，非常具有价值！
HTML5 indexedDB前端本地存储数据库实例教程
2017年07月20日，星期四HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。
未来一定是indexedDB的…
借助Service Worker和cacheStorage缓存及离线开发
2017年07月12日，星期三html5 manifest缓存技术投入产出比有些低，因此不温不火，本文所要介绍的基于Service Worker和cacheStorage缓存及离线开发，套路非常固定，无侵入，且语言纯正，直接复制粘贴就可以实现缓存和离线功能，纯前端，无需服务器配合。一个看上去很酷的功能只要复制粘贴就可以实现，绝对是成本极低的，小白中的小白也能上手。
JS前端创建html或json文件并浏览器导出下载
2017年07月5日，星期三我们使用JS创建了一个动态的JSON数据，希望可以保存为JSON文件到本机系统，传统做法可能需要复制粘贴，而实际上，我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载，而且代码和原理都出乎意料的简单。
小tips: 页面链接跳转历史URL不记录的兼容处理
2017年02月15日，星期三我们点击首页的“分类”进入分类页，然后分类页头部有个“男生”“女生”的频道切换，这两个都是直接的链接，如果就会带来这么一个问题，如果用户在“男生”“女生”的频道之间反复切换，则当我们点击左上角的返回按钮（如下图）的时候，就会发现点击很多次还是在“分类页”上，这其实是不符合用户预期的，正常的用户预期应该是点击左上角的返回按钮应该直接回到首页，而不是还在当前页过家家。
要实现思路并不难，就是“男生”“女生”频道切换的时候，URL地址不要进入历史URL记录堆栈，但如何实现同时保证各个浏览器都兼容是个问题，本文就将展示相关的实践，希望对大家的学习能够有所帮助。
开源移动端元素拖拽惯性弹动以及下拉加载两个JS
2017年01月25日，星期三开源两个起点中文网M站两个动效交互JS，封装良好，即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果，另外一个是基于窗体的下拉释放加载刷新效果。
我的应用
我的应用