最近做 webview 时有一个微信分享功能,图片需要通过 base64 编码以后传到客户端,再显示在微信分享链接的气泡里。
一直听说 base64 编码,终于趁这个机会搞了个明白。
base64是什么
base64 编码是将图片转换为字符串,使用时,通过解码这个字符串,可以对图片进行完全还原。
在未知 base64 编码原理之前,我以最基本的认知认为,将图片编码是完全可行的。最简单暴力的一种编码方式就是记录下每个像素点的 rgb 信息,通过依次解码就能够还原整个图像。
故事我有,我不喝酒。
最近做 webview 时有一个微信分享功能,图片需要通过 base64 编码以后传到客户端,再显示在微信分享链接的气泡里。
一直听说 base64 编码,终于趁这个机会搞了个明白。
base64 编码是将图片转换为字符串,使用时,通过解码这个字符串,可以对图片进行完全还原。
在未知 base64 编码原理之前,我以最基本的认知认为,将图片编码是完全可行的。最简单暴力的一种编码方式就是记录下每个像素点的 rgb 信息,通过依次解码就能够还原整个图像。
低版本 IE 一直是前端开发的黑洞,从今年起公司终于放弃了 IE 这个低能儿。最近可以大刀阔斧地使用一些 CSS3 新属性了,从简单的了解到使用,还得花一段时间好好琢磨一下。
flex 属性是 flex-grow
, flex-shrink
和 flex-basis
三个属性的简写形式,必须应用在弹性盒模型(设置了 display: flex)元素的子元素上,否则 flex 属性是不起作用的。
语法格式如下:
flex: <flex-grow> <flex-shrink> <flex-basis>
flex-basis 指明了元素的宽度,相当于 width 这个属性。如果flex-basis 和 width 两个属性同时存在,则 flex-basis 会覆盖 width 的值。
不止一次地在项目中使用到 transitionend,这个事件用于监测 transition 动画是否完成,当完成时调用回调函数。与此相似的还有 animationend 事件。
开始使用 transitionend 时觉得很难以理解,因为在大部分情况下,当我希望监测某个元素是否完成动画时,这个事件总是被触发了很多次,而且触发的时间也远远提前于动画完成时间。
如果子元素也有transition的话,transitionend事件会冒泡。DOM 结构如下,只包含一个父元素和一个子元素。
前些日子做了几个嵌入安卓的 webview,找安卓同事要素材的时候,总是跟我提 dpdp 的,作为前端工程狮,常年和 px 打交道,有时也会用 rem 和 em。dp 是个啥?
参考网址:https://developer.android.com/guide/practices/screens_support.html
像素和分辨率可以用于形容【图像】或【屏幕】,如不做特别说明,这里均指屏幕,图像情况类似。
今天看代码时看到了 slice(0)
的写法,简单研究了一下。
JS 中对象(数组也是对象)是索引传递的,赋值时会被共享,而不是复制副本。所以只要一个对象被修改,被赋值的变量也会被改变。
1 | var arr1 = ['George','John','Thomas','James','Adrew','Martin']; |
打印结果为:
a 标签上有属性 href,标明了点击元素跳转的另一个 url。偶尔总需要在跳转前后做些什么,所以顺理成章的在 a 标签上绑定了 onclick 事件。href 属性跳转和 click 事件之间究竟是什么关系呢?
如果 a 标签上出现了 href 属性并同时绑定了 click 事件(当然并不推荐这样做),是怎样一个执行顺序呢?
随手写了一个栗子:
年后,前端林宥嘉走了,一个满口广普的93年小孩儿。有点伤感,曾经在下班之后聊过几次,通常都是他教我写代码,帮我找bug。有几个瞬间,我突然有了无数动力学前端,因为想变得像他一样厉害。同样刚刚毕业,这是我心里学霸的模样,可又是个很有意思的人。
最近因为项目重新翻出了gulp,发现好久不用又忘记了。总是这样,学了忘忘了学,脑容量让人堪忧。
之前从“林宥嘉”的主页里看到一篇很好的用于gulp入门的翻译,以下内容完全是用代码重现了整个过程,聊表怀念:Gulp新手入门教程。
随笔2
这是一篇随笔哦随笔哦随笔哦
图片资源放在本地 source/ 文件夹后,本地服务器浏览时图片正常显示,但部署到 github 上会找不到图片。
究其原因,是图片路径出现问题。开始时自己在 source/ 文件夹下建了 asset 文件夹,专门用于存放文章相关的图片:
source
|- _post
|_ asset
|- blogVideo
|_ blogImg
|_ hexo-1.png
使用 markdown 引用图片的方式为
![hexo image](../asset/blogImg/hexo-1.png)
查看结构,发现部署以后,图片会自动添加日期相关的文件结构目录: