所有题目地址: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画布内像素数据的方法有印象,查了下,轻松解决。

  1. 创建画布元素canvas;
  2. 获取2D渲染上下文,相关方法:getContext('2d');
  3. 将图片绘制到画布里,相关方法:drawImage(imgElem, 0, 0, imgWidth, imgHeight);
  4. 获取画布里的ImageData对象,相关方法:getImageData(0, 0, canvas.width, canvas.height);
  5. 取出全部像素信息,第4步中返回对象里的data属性,一个类数组的对象,每个像素由rgba四个值组成,一个像素占4个元素;

Step2——像计算机一样阅读

这一步是个坑,只提示转成0跟1,但转换方式没说,可能性有很多,如果不是有高人提示,很少会想到二值化。

  1. 遍历上面提到的data属性,每4个元素取前3个,即rgb;
  2. 对rgb值判断,小于等于127为0,大于127为1;
  3. 逐个拼接以上得到的0和1;

Step3——变成ASCII字符

一开始还在想怎么把二进制转ASCII,原本以为得写个对象,用查表方式来处理,后来高人提示可以先转十进制再转,fromCharCode接受十进制参数不接二进制,我咋就没想到转二进制呢,该打。

  1. “二进制”字符串遍历,每8个一组,转十进制,相关方法:parseInt(str, 2),用二进制方式解析字符串,返回十进制数值;
  2. 第1步8个字符(0和1)已经变成一个十进制,同时使用String.fromCharCode()方法解析成ASCII字符;
  3. 全部转换完毕,判断字符串“AlloyImage”位置,相关方法:indexOf(str);
  4. 截取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),果断直接使用,成功显示出图片。

  1. 创建img元素,createElement();
  2. 设置src值为'data:image/png;base64,' + btoa(str);
  3. 将img元素添加到document中,appendChild();
  4. 问题答案成功显示,4张图片,4个答案。

后记:做完这道题,又学到了很多东西,同时也巩固了一些快生疏的知识。

临睡前再扯一句:愿所有前端,拥抱新技术,珍爱生命,远离IE6789。

腾讯CodeStar第二季前端突击队腐蚀的画解法步骤笔记的更多相关文章

  1. TAT 前端突击队 第四关 题目 腐蚀的画

    腐蚀的画 1.一个漂亮的画作在经过几千年岁月的洗礼下,部分地方已经被腐蚀了,像一个孤独的老人,满脸爬满了皱纹.2.但在一个晚上,老王突然发现,这些腐蚀的部分中,隐藏着岁月留下的密秘.请你帮助老王寻找这 ...

  2. 2015腾讯暑期实习生 Web前端开发 面试经历

    [2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可 ...

  3. Big Data 應用:第二季(4~6月)台湾地区Game APP 变动分布趋势图

    图表简介: 该示意图表示了台湾地区第二季内所有Game APP类别的分布情形,经由该图表我们可以快速的了解到在这三个月内,哪类型的APP是很稳定:抑或者哪类型的APP是非常不稳定的. 名词解释: 类别 ...

  4. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  5. 《舌尖上的中国》第二季今日首播了,天猫食品也跟着首发,借力使力[bubuko.com]

    天猫旗下的天猫食品与央视CCTV-1栏目<舌尖上的中国>第二季(以下简称“舌尖2”)达成合作,天猫食品成为舌尖2独家合作平台,同步首发每期 节目中的食材和美食菜谱,舌尖2摄制组还将为同步上 ...

  6. 一起做RGB-D SLAM 第二季 (一)

    小萝卜:师兄!过年啦!是不是很无聊啊!普通人的生活就是赚钱花钱,实在是很没意思啊! 师兄:是啊…… 小萝卜:他们都不懂搞科研和码代码的乐趣呀! 师兄:可不是嘛…… 小萝卜:所以今年过年,我们再做一个S ...

  7. JAVA入门第二季(mooc-笔记)

    相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第二季&g ...

  8. 再造轮子之网易彩票-第二季(IOS 篇 by sixleaves)

    02-彩票项目第二季 2.封装SWPTabBar方式一 接着我们思考如何进行封装.前面已经将过了为什么要封装, 和封装达到的效果.这里我们主要有两种封装方式,分别是站在不同的角度上看待问题.虽然角度不 ...

  9. QQ聊天界面的布局和设计(IOS篇)-第二季

    QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...

随机推荐

  1. java实现压缩文件下载

    转载:https://www.cnblogs.com/zeng1994/p/7862288.html

  2. Connection closing...Socket close. Connection closed by foreign host. Disconnected from remote host(centos6.9) at 14:59:05.

    查找网上资料解决方法如下 [root@localhost ssh]# service sshd start Starting sshd: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  3. element-ui表格合并span-method

    先看一下合并后的样式,表格第二行,二三四列合并 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和c ...

  4. from表单,图片预览,和表单提交

    <form> <input id="file" class="topsub-file" type="file" name= ...

  5. 转 如何在secureCRT上设置常用的快捷输出按钮栏听语音

    https://jingyan.baidu.com/article/5d6edee2f32de199eadeec25.html 要注意secureCRT的版本,建议下载最新版本的软件         ...

  6. jsp中判断if 和 else

    <c:choose>                   <c:when test="${date==datetime}">                ...

  7. Django重新整理

    1.母版的继承 #base<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset ...

  8. Java基础10-循日历制作

    编写过程:先指定固定的年份来输出指定月份的日历 /*计算1900年1月1日到2018年11月1日一共有多少天 计算月份 对7进行取模,结果就为星期几 */ import java.util.Scann ...

  9. HDU 4336——Card Collector——————【概率dp】

    Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  10. Spring-cloud微服务 Eureka学习教程-分布式搭建EurekaServer、EurekaClient(中级)

    我们这里只有一台服务器,所以我们先仿集群搭建. 完整demo项目代码:https://github.com/wades2/EurekaDemo2 在这之前我们先分析分析Eureka相比其他注册中心的好 ...