腾讯CodeStar第二季前端突击队腐蚀的画解法步骤笔记
所有题目地址:http://codestar.alloyteam.com/q2
本题内容:http://www.cnblogs.com/yedeying/p/3617593.html
腐蚀的画涉及到的图片有4张:
http://codestar.alloyteam.com/q2/puzzle/4/1.png
http://codestar.alloyteam.com/q2/puzzle/4/2.png
http://codestar.alloyteam.com/q2/puzzle/4/3.png
http://codestar.alloyteam.com/q2/puzzle/4/4.png
Step1——拿到图像数据
很少接触canvas,不过对获取canvas画布内像素数据的方法有印象,查了下,轻松解决。
- 创建画布元素canvas;
- 获取2D渲染上下文,相关方法:getContext('2d');
- 将图片绘制到画布里,相关方法:drawImage(imgElem, 0, 0, imgWidth, imgHeight);
- 获取画布里的ImageData对象,相关方法:getImageData(0, 0, canvas.width, canvas.height);
- 取出全部像素信息,第4步中返回对象里的data属性,一个类数组的对象,每个像素由rgba四个值组成,一个像素占4个元素;
Step2——像计算机一样阅读
这一步是个坑,只提示转成0跟1,但转换方式没说,可能性有很多,如果不是有高人提示,很少会想到二值化。
- 遍历上面提到的data属性,每4个元素取前3个,即rgb;
- 对rgb值判断,小于等于127为0,大于127为1;
- 逐个拼接以上得到的0和1;
Step3——变成ASCII字符
一开始还在想怎么把二进制转ASCII,原本以为得写个对象,用查表方式来处理,后来高人提示可以先转十进制再转,fromCharCode接受十进制参数不接二进制,我咋就没想到转二进制呢,该打。
- “二进制”字符串遍历,每8个一组,转十进制,相关方法:parseInt(str, 2),用二进制方式解析字符串,返回十进制数值;
- 第1步8个字符(0和1)已经变成一个十进制,同时使用String.fromCharCode()方法解析成ASCII字符;
- 全部转换完毕,判断字符串“AlloyImage”位置,相关方法:indexOf(str);
- 截取0到“A”的位置间的字符串,相关方法slice,substring;
Step4——转成base64数据
这一步已经很明显,图片url的base64表示方式,这表明结果将会是一张图片。一开始纠结着ASCII怎么转Base64,尝试了base64加密,出来的结果无法显示成图片,失望时想到jq的base64插件,下载后看了下readme,发现window.btoa的判断,一查才知道,强大的JavaScript已经有base64 to ascii的方法了(目前仅chrome、safari、firefox支持,http://help.dottoro.com/ljvfsbvr.php),果断直接使用,成功显示出图片。
- 创建img元素,createElement();
- 设置src值为'data:image/png;base64,' + btoa(str);
- 将img元素添加到document中,appendChild();
- 问题答案成功显示,4张图片,4个答案。
后记:做完这道题,又学到了很多东西,同时也巩固了一些快生疏的知识。
临睡前再扯一句:愿所有前端,拥抱新技术,珍爱生命,远离IE6789。
腾讯CodeStar第二季前端突击队腐蚀的画解法步骤笔记的更多相关文章
- TAT 前端突击队 第四关 题目 腐蚀的画
腐蚀的画 1.一个漂亮的画作在经过几千年岁月的洗礼下,部分地方已经被腐蚀了,像一个孤独的老人,满脸爬满了皱纹.2.但在一个晚上,老王突然发现,这些腐蚀的部分中,隐藏着岁月留下的密秘.请你帮助老王寻找这 ...
- 2015腾讯暑期实习生 Web前端开发 面试经历
[2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可 ...
- Big Data 應用:第二季(4~6月)台湾地区Game APP 变动分布趋势图
图表简介: 该示意图表示了台湾地区第二季内所有Game APP类别的分布情形,经由该图表我们可以快速的了解到在这三个月内,哪类型的APP是很稳定:抑或者哪类型的APP是非常不稳定的. 名词解释: 类别 ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 《舌尖上的中国》第二季今日首播了,天猫食品也跟着首发,借力使力[bubuko.com]
天猫旗下的天猫食品与央视CCTV-1栏目<舌尖上的中国>第二季(以下简称“舌尖2”)达成合作,天猫食品成为舌尖2独家合作平台,同步首发每期 节目中的食材和美食菜谱,舌尖2摄制组还将为同步上 ...
- 一起做RGB-D SLAM 第二季 (一)
小萝卜:师兄!过年啦!是不是很无聊啊!普通人的生活就是赚钱花钱,实在是很没意思啊! 师兄:是啊…… 小萝卜:他们都不懂搞科研和码代码的乐趣呀! 师兄:可不是嘛…… 小萝卜:所以今年过年,我们再做一个S ...
- JAVA入门第二季(mooc-笔记)
相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第二季&g ...
- 再造轮子之网易彩票-第二季(IOS 篇 by sixleaves)
02-彩票项目第二季 2.封装SWPTabBar方式一 接着我们思考如何进行封装.前面已经将过了为什么要封装, 和封装达到的效果.这里我们主要有两种封装方式,分别是站在不同的角度上看待问题.虽然角度不 ...
- QQ聊天界面的布局和设计(IOS篇)-第二季
QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...
随机推荐
- Linux下Redis安装使用,主从模式,哨兵模式与PHP扩展(PHP7适用)
一,软件准备 #redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz #phpredis 非php7使用 下载后文件名为:ph ...
- powershell和cmd区别
Powershell是cmd的超集,换句话说,cmd能做的事情,Powershell都能做,但是Powershell还能额外做许多cmd不能做的活. 主要是系统管理功能.脚本语言和在线帮助更强大,你确 ...
- Java使用Array类创建多维数组
1.创建一维数组 import java.lang.reflect.Array; public class ArrayTest { public static void main(String[] a ...
- phpstudy+phpstorm配置xdebug
配置这个xdebug真的是一个很崎岖的过程.首先在网上搜了一下资料~说要下载xdebug对应的版本~然后打印phpinfo之类一堆~结果没有起作用~当时一直就觉得是不是版本不对.然后在群里面问别个给我 ...
- Python读写操作Excel模块_xlrd_xlwt_xlutils
Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...
- ubuntu下找不到eth0
1.,查找不到eth0 2.修改/etc/network/interface 发现没有eth0网卡信息 添加如下 autho eth0 iface eth0 inet dhcp 执行 sudo /et ...
- /etc目录下重要的目录和文件
牢记: 1.*/etc/sysconfig/network-scripts/ifcfg-eth0 网卡的配置信息 重启网卡:1)/etc/init.d/network restart(所有网卡) ...
- 18-----BBS论坛
BBS论坛(十八) 18.首页轮播图实现 (1)front/css/front_base.css .main-container{ width: 990px; margin: 0 auto; over ...
- mysql 安装以及卸载 CentOS 6.9
mysql官网下载地址:https://dev.mysql.com/downloads/mysql/ 本次操作系统是 阿里云服务器 CentOS 6.9 64位 下载得到tar 包: mysql ...
- nginx —— 理解nginx_upstream_jvm_route模块解决tomcat多节点session不一致问题
这种方式不需要修改web工程只需要对nginx下载nginx_upstream_jvm_route插件,修改tomcat和nginx配置,就能解决session问题.由于这种方式不会把session存 ...