Canvas 取色器

课程目标

• 学习掌握 JS 文件相关知识，学会运用 blob，file，fileReader 处理二进制数据和文件。
• 学习掌握 Canvas 对图像处理相关知识。

阅读

• 二进制数据，文件 (opens new window)
• 使用图像 Using images (opens new window)
• 像素操作 (opens new window)
• HTML5 Canvas Image Tutorial (opens new window)
• MDN Canvas 学习指南 (opens new window)
• canvas 像素点获取 (opens new window)

编码

参考示例 DEMO (opens new window),实现一个图片拾色器软件，具体功能如下

• 点击选择图片按钮，就从文件夹选择一张图片上传
• 画布内容转换为 base64 编码格式的图片
• 鼠标悬浮在图片上方时，右上角同步显示色块信息
• 鼠标点击获取该位置的颜色色块信息，将色块信息显示在图片上方

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。