|
1 2 3 4 5 6 7 8 9 |
string txt = @"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAARCAMAAAArMfRlAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACZFBMVEX////61s/+9vTxkn7wiHP5zsXtblX4yb/sZkv++Pftb1b4y8H74NrueGD+9/XyloTxjXn4y8LvhG7//v7+9fP619D2uKz86uf1saTtcVjsalDqXUDsak/qWz/98vD0qpvrYETvgGrvg23vgWvqWj3ud1/1r6H1sqT629T5z8frZEn3w7n++vrsbVT7497//v3vgWv50Mf4xrz2t6vqWz74ysH73dfrYUX2u6/3vrP1rZ/saU7ufWb1sKLsZ0zwinXvf2jtb1XrYkb1s6btcFf//PvueGHznYzsbVP4xbvynYvqXUHuemPvhW/97+z749785uHufGX85N/73df62NH50MjrX0P3wLTvgmz2ua362NHtcln61c7rX0L85uL51Mz//PzqXD/zoZH+9PL98e74ycDsbFLrYEX2t6rvgGnufGXtdVzudl72uq7ymYfxkn/wh3HzpJTrZkvvg27xlYLxkH3wiXX86ub85eH97ur98/HsaE7udl7rY0jsaE32uq73vLHymoj//f397er5zcTzn4797+3tcVj508vsa1L4yL72vLD0qpv+9/b3w7jwhnHrZEjuemL0qJn86OTzno32taj3vrL74dv739n739rqXkLsa1H+8/H3wrf73tj2tajrZUr4zMPue2Txk4D3wLXwjHj++ff0pZX50sr3wrf3wbbtc1v1saPzpJTtdV3wh3LwhXDzopL/+/ryl4X2tqn74dzvfmjxjnvueWL1r6H1s6Xxj3v86OT++vn4x7398O75zcT1tKf3v7T86eXwjHj0q5z0ppbwi3f97uv85ODtdFv4xLry8julAAAAAWJLR0QAiAUdSAAAA41JREFUSMfVlPtbTEEYx9+2Op1yqLRa02XjNCnataxuK2pbhYguIqRsRCKEdS1JS5RyTyQUIRa5leu63/1TZs6Zczbxk/U8Ht8f5jvv2dl5P+eddw7Afy8fzd/by9ePyVcK/TkyBPDyb4FBo0AYPUYOgkNU+ZAwdGyYd4m14zxzPlwnKZwkHo9QRCRCKCqaDHqAmAkTxVgcJ4riJLIwXiBKmCwIUxIBDMapXr69adp0D4RZdjP/SyVmJCUD6HHK8IX+qWRGINJC1B0sSPaZ6UaOm6WB2RERGenxoDpRJtaBxopQlm2O6iBk56gQ3FxJ86TEofO1EBaUaKDz3AUL8/z8FmErOavFFCKfVCJ8glBAIQoDRkIUYbk2S5KKAZbiqYqTR2nLCISkNOMwzyz5fSWWrwBYiUsJ1CoSleXq9eV4tV6vt9OFtCuiKkLWEIi1SZUjIdaxRirJouP6RMUBCqo2KBDJGcM8t1rZYuOmGkmbNpJg8xb71pm127Ra7fZQCrHD4diJdzkcjt2Mdk+ZfBwJNhLsLY1CaOI+S101l1G/1rx/EUINtYYDNXTbmkbFwV54UCdDNKX4WYe5M5pdsMCAQBoekhs20jra5ns4gbwlL0HUi2I1ziONKTZJEM1HdskQRxvo2bWEKZWw17Wa0+l2qdNXyMmPKQ5tR9oliOMnTp46XelxgGWs3c7gM/JZ2OedBZOzgy92QmIwg6A61+k5t/OlFtaYF7pMALrSFu5iXLd0HMgiQQB3aWQlLpclAIVw4g4tfaI40ZRxCkQLx10x9/RevdYO0HfdSZ7dqCqQIDiqiu10RDT1zVhBuR2Gsj3y/5sa+hlEch2Njbdut0i9cFzxxnSXKxtn3+nE7dI/FAfIqSj6qRIL716g0T2SbwDg/gOlEg8f4UgLq0SJP6m+v02+otcfs4341QyiPJpsuber+DyeTBoP5ytOV9FKCCy5oEIM2uwjjgNg1m71O2JiEP1xa+a2DT0pV65RPJflkCH668NA95TjevLaGQR0GBE6eRbgWV1VasNsj6sQ2eQTiHoVB3j+guV7iYvc7pxXvNvt5gc1MVsG6oOa4LXT2fMGKt8OOfIhqxF6azPfPQTeupWpi0BAbCt4KZPrKJsZBlwu14z3Q+SS7ghc/OFjMi3HJ1H83Az5o+gNuveODF/6NNCZoqqbPPr6TfvH6WV9P+Hta3ivblf5v0ZQ9QOnhO0Euy9VSAAAAABJRU5ErkJggg=="; var tmpArr = txt.Split(','); byte[] bytes = Convert.FromBase64String(tmpArr[1]); using (MemoryStream ms = new MemoryStream(bytes)) { ms.Write(bytes, 0, bytes.Length); var img = Image.FromStream(ms, true); img.Save("demo.png"); } |
摘自：http://www.itnose.net/detail/6387947.html
View Detailsbase64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0。。。。”； 当接收到上边的内容后，需要将data:image/png;base64,这段内容过滤掉，过滤成：“iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0。。。”；然后进行保存。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
app.post(<span class="hljs-string">'/upload'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(req, res)</span></span>{ <span class="hljs-comment">//接收前台POST过来的base64</span> <span class="hljs-keyword">var</span> imgData = req.body.imgData; <span class="hljs-comment">//过滤data:URL</span> <span class="hljs-keyword">var</span> base64Data = imgData.replace(<span class="hljs-regexp">/^data:image\/\w+;base64,/</span>, <span class="hljs-string">""</span>); <span class="hljs-keyword">var</span> dataBuffer = <span class="hljs-keyword">new</span> Buffer(base64Data, <span class="hljs-string">'base64'</span>); fs.writeFile(<span class="hljs-string">"image.png"</span>, dataBuffer, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(err)</span> </span>{ <span class="hljs-keyword">if</span>(err){ res.send(err); }<span class="hljs-keyword">else</span>{ res.send(<span class="hljs-string">"保存成功！"</span>); } }); }); from:https://segmentfault.com/a/1190000005364299 |
pointer-events 是一個滿有趣的 CSS3 屬性，雖然主要是針對 SVG ，但其中幾個屬性應用在 div 上也是頗有意思。顧名思義，這是一個針對滑鼠事件的屬性，預設值為 auto，若值為 none，則可以穿越該元素，點擊到下方的元素。除了 auto 和 none，這是完整的屬性列表：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit，除了 auto 與 none，其他都是控制 SVG 的屬性，若採用預設值，則 SVG 就是以 visiblePainted 來表現。 首先看到 pointer-events: auto，就是我們一般常見的，一個 div 被另外一個 div 遮住，就無法進行點擊或 hover 的動作，如下圖： HTML：
|
1 2 |
<span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"ybox"</span><span class="tag">></div></span> <span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"gbox"</span><span class="tag">></div></span> |
CSS：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="pun">.</span><span class="pln">ybox </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">255</span><span class="pun">,</span> <span class="lit">200</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">8</span><span class="pun">);</span><span class="pln"> margin</span><span class="pun">:</span> <span class="lit">20px</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span> <span class="lit">3</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">gbox </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span> <span class="lit">220</span><span class="pun">,</span> <span class="lit">170</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">8</span><span class="pun">);</span><span class="pln"> margin</span><span class="pun">:</span> <span class="pun">-</span><span class="lit">80px</span> <span class="lit">40px</span> <span class="lit">20px</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span> <span class="lit">2</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">gbox</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">255</span><span class="pun">,</span> <span class="lit">50</span><span class="pun">,</span> <span class="lit">50</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">8</span><span class="pun">);</span> <span class="pun">}</span> |
這時候如果我們把 ybox 增加 pointer-events: none;，就會發現底下的 gbox 可以 hover 了！ 至於其他的屬性，在這邊稍微做一些介紹，根據 這篇的解釋，可以知道其他屬性是這樣解釋： visiblePainted： 只適用於 SVG。元素只有在以下情況才會成為鼠標事件的目標：visibility 屬性值為 visible，且鼠標指針在元素內部，且 fill 屬性指定了 none 之外的值、visibility 屬性值為 visible，鼠標指針在元素邊界上，且 stroke 屬性指定了none 之外的值。 visibleFill： 只適用於 SVG。只有在元素 visibility 屬性值為 visible，且鼠標指針在元素內部時,元素才會成為鼠標事件的目標，fill屬性的值不影響事件處理。 visibleStroke： […]
View Details近日刚做的一个功能，要在app里使用内嵌页面进行图像的上传。 从功能上看，原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器，所有的实现都要依赖浏览器提供的接口，不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑! 吐槽归吐槽，但是折腾的劲头不能丢！ 使用input file[camera]属性调用相机 简直So easy！
|
1 2 |
<input type="file" accept="image/*;" capture="camera" > |
只需要这么一条简单的代码，在手机浏览器点击就可以打开相机了。 capture是什么？其实就是对打开方式的设置。
|
1 2 3 4 5 |
<!-- capture=camcorder，调用手机摄像功能 --> <input type="file" accept="video/*" capture="camcorder" > <!-- capture=microphone，调用手机录音功能 --> <input type="file" accept="audio/*" capture="microphone" > |
魅族MX5测试结果： 谷歌浏览器可以打开相机和摄像功能，其他方式均为相机、图库、文件管理器等混合选择项。 自带浏览器打开均为文件管理器。 由此说明此属性兼容性还是个问题。不过这并不能阻止我继续折腾下去！ 图片压缩 在如今这个手机普遍千万像素的时代，一张照片动辄5M的大小。作为一个良心的开发者，我们是要为用户的流量负责的。 该怎么做？我也不知道。大家都在用canvas实现，我也就用了。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
document.getElementById('file').addEventListener('change', function() { var reader = new FileReader(); reader.onload = function (e) { compress(this.result); }; reader.readAsDataURL(this.files[0]); }, false); |
不管文件域是用何种方式打开的，都可以在 change 事件中获取到选择的文件或拍摄的照片。 创建一个FileReader对象，我们需要调用readAsDataURL把文件转换为base64图像编码，如data:image/jpeg;base64……这种格式。 onload是一个异步回调，当文件读取完执行该方法内代码。this.result记录读取结果，如果读取失败，该值为null。在这里进行图片压缩的具体操作。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var compress = function (res) { var img = new Image(), maxH = 160; img.onload = function () { var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d'); if(img.height > maxH) { img.width *= maxH / img.height; img.height = maxH; } cvs.width = img.width; cvs.height = img.height; ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.drawImage(img, 0, 0, img.width, img.height); var dataUrl = cvs.toDataURL('image/jpeg', 0.6); // 上传略 } img.src = res; } |
创建一个Image对象，给src属性赋值为读取结果，同样在onload异步回调中编写处理图片的代码。 这里就要开始使用canvas进行图片压缩了。 首先是尺寸按比例缩放，然后把图片绘到画布上，最后调用toDataURL方法压缩图像质量。
|
1 2 |
context.toDataURL('MIME类型', 图像质量0-1); // 该方法返回base64图像编码 |
代码里省略了一些校监操作，如文件类型约束和文件大小判断（小于一定值可以不压缩）。 最后就是把数据发送到后端的操作，这里就不说了。 Html5调用摄像头 通过以上的代码已经可以实现调用手机相机拍照、压缩、上传这一整套流程了。 不过在折腾的过程中也发现了一种调用摄像头的方法。注意，是摄像头！使用input调用的是相机。其中的差别就是摄像头是只捕获画面，相机还包括原生的一些拍照、设置等控件。 通过对摄像头的调用可以做很多有趣的事，比如拍照美化、滤镜等。可以说实现一个第三方相机是没问题的。 之前下载过一款安卓相机APP，不到100K的大小，可以实现拍照的一些风格化，也许就是Html5实现的呢。 需要用到的是 getUserMedia API，具体的实现这里就不贴了。 from:http://www.imys.net/20150916/webapp-input-use-camera.html
View Details总结整理时下流行的浏览器User-Agent大全 此文章转至：http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml 用于学习 一、基础知识篇： Http Header之User-Agent User Agent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；例如用手机访问谷歌和电脑访问是不一样的，这些是谷歌根据访问者的 UA来判断的。UA可以进行伪装。 浏览器的UA字串的标准格式：浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。 字串说明： 1、浏览器标识 出于兼容及推广等目的，很多浏览器的标识相同，因此浏览器标识并不能说明浏览器的真实版本，真实版本信息在 UA 字串尾部可以找到。 2、操作系统标识 3、加密等级标识 N: 表示无安全加密 I: 表示弱安全加密 U: 表示强安全加密 4、浏览器语言 在首选项 > 常规 > 语言中指定的语言 5、渲染引擎 显示浏览器使用的主流渲染引擎有：Gecko、WebKit、KHTML、Presto、Trident、Tasman等，格式为：渲染引擎/版本信息 6、版本信息 显示浏览器的真实版本信息，格式为：浏览器/版本信息 浏览器User-Agent的详细信息 PC端： safari 5.1 – MAC User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50 safari 5.1 – Windows User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 […]
View DetailsUber工程师在官方博客上描述了他们为什么要从 Postgres 切换到 MySQL 数据库。Uber的早期架构是由 Python编写的后端应用构成，使用了 Postgres 数据库。但此后，Uber的架构发生了显著的改变，转变到了微服务模型和新的数据平台。以前他们使用 Postgres，现在则改用了基于 MySQL 的数据库分片层。Uber工程师称他们之所以切换到Schemaless和其它基于 MySQL 的后端服务，最主要的原因是Postgres 数据复制效率低下，Postgres更新已有行的效率低于 MySQL，Postgres需要重写每一个行索引，而MySQL只更新改变的索引。 相关链接 MySQL 的详细介绍：请点这里 MySQL 的下载地址：请点这里 from:http://www.oschina.net/news/75638/uber-mysql-migration
View DetailsGoogle Project Zero 黑客 Tavis Ormandy 报告在流行密码管理工具 LastPass 中发现了一个高危0day 漏洞，允许恶意网站完整访问用户的账号。漏洞已经报告给了 LastPass，细节没有披露。巧合的是另一位安全研究人员 Mathias Karlsson 也报告了 LastPass 的一个类似漏洞，目前还不清楚两个漏洞是否相同。 Karlsson 在其博客上描述了他的发现：LastPass的密码自动填写功能存在bug，允许恶意网站欺骗 LastPass 相信它是另一个网站比如Twitter，窃取用户登录凭证。Karlsson建议用户关闭自动填写功能。LastPass称它已经修复了漏洞，漏洞主要影响 Firefox 用户。 相关链接 Lastpass 的详细介绍：请点这里 Lastpass 的下载地址：请点这里 from:http://www.oschina.net/news/75639/lastpass-0day-bug
View Details一年一度的IEEE Spectrum编程语言排行盛宴又来了，来看看今年7月26日发布的前十名榜单。这个排行榜已经进行了三年。IEEE Spectrum的排序是来自10个重要数据源的综合，例如 IEEE Xplore, GitHub, CareerBuilder 等等，他们根据数据源对48种语言给出不同角度的排列。调整不同的权重，可以得到不同的排序结果。用户甚至可以根据自己的情况，调整权重，得到相应的排序 结果。 感兴趣的朋友可以点击这个链接进入网站查看结果：Interactive: The Top Programming Languages 2016。 我们来对比一下去年和今年的前十榜单（左边2016年，右边2015年），看看这一年的趋势。 可 以发现，C取代Java成为第一名，Python和C++换了位置，C和R换了位置，PHP和JavaScript保持原来的位置不动。另外，需要重点提 出的是，2016年第十名出现了新的角色：Go，Go原来在去年榜中排第13位，而去年第10名的Matlab在今年榜中位居第14名。 总体而言，仅就前10名来看，上升的语言有：C、Python、R和Go。 纵观整个48种语言此起彼伏的发展势头，参与排行榜制作的Nicholas Diakopoulos撰文表示，与大数据相关的语言普遍存在上升趋势，比如Go、Julia、R、Scala甚至是Python。 榜 单前十名的竞争是最为激烈的。谷歌的Go前年第19名，去年第13名，今年更是挤进前10，充分说明了其日益增长的影响力。Diakopoulos分析 说，Go的快速上升跟Github上的使用率上升有关。据统计，2016年Github上以Go为主要语言的的原始仓库数量是2014年的四倍，另外在 Reddit上人们对Go的讨论也较多，如今有关Go的帖子比2014年翻了三倍。 专 门用于数据统计分析的R语言排名一路飙升，从14年的第13名，到15年的第6名，再到今年的第5名。但是R语言最重要的一点，是它在学术研究论文中被提 及的次数显著上升。IEEE Xplore是收录了数百万的学术论文、行业标准和专著的权威数据库，这个排行榜也给IEEE Xplore的数据源以较大权重。数据显示，2015年IEEE Xplore中仅有39篇论文讨论R语言，今年相关论文数量达到了244篇。 而Scala从前年第18名升至今年15名，Julia 从去年40名跃升至今年的33名。 在 招聘市场的权重里，虽然Java 和Python一直在人才市场中居于霸主地位，但Diakopoulos表示雇主们对于R和Scala的兴趣明显在上升。2014年招聘网站 CareerBuilder和Dice上所列的R和Scala相关工作只有136个，但到2016年这一数量翻了四倍，达到631个。 榜单一定程度上反映了学术和市场趋势，读者可以根据自己的实际情况来参考，来规划自己的学术和职业发展方向。 稿源：雷锋网 from:http://www.oschina.net/news/75640/ieee-spectrum-latest-rank
View Detailsotter 基于数据库增量日志解析，准实时同步到本机房或异地机房的mysql/oracle数据库. 一个分布式数据库同步系统。 工作原理： 原理描述： 1. 基于Canal开源产品，获取数据库增量日志数据。 什么是Canal, 请点击 2. 典型管理系统架构，manager(web管理)+node(工作节点) a. manager运行时推送同步配置到node节点 b. node节点将同步状态反馈到manager上 3. 基于zookeeper，解决分布式状态调度的，允许多node节点之间协同工作. osc地址：http://www.oschina.net/p/otter
View DetailsGrafika 是一个 PHP 的图像处理库。可用于改变图像大小、剪切、比较，以及添加水印等操作。同时可以创建一些文本图片、几何图形并应用一些过滤器。基于 Imagick 和 GD 构建。 特征 智能裁剪 图像比较 感知哈希 高级图像处理过滤器 贝塞尔曲线 示例代码： ? 1 2 3 4 5 6 7 useGrafika\Grafika; $editor= Grafika::createEditor(); $editor->open( "path/to/jpeg/image.jpg"); $editor->resizeExact( 200, 200 ); $editor->save( "path/to/edited.jpg", null, 90 ); osc地址：http://www.oschina.net/p/grafika
View Details