Demo--Canvas with React

一个使用Canvas处理图片的Demo,使用React + webpack + Redux 的技术栈,非常适合初学者,希望你喜欢!

为什么

学习canvas已经有一阵子了,忙完了计组课设,考完了数据挖掘,终于有时间来做一点小Demo来巩固自己所学的知识了。就像上面介绍的那样,这是一个使用Canvas进行图片处理的Demo,其可以选择本地图片,改变其R G B 以及透明度,然后可以选择保存到本地。并且为了重温很久没碰的React,前端使用了React,使用Redux进行数据的管理(虽然简单到没必要使用),并且使用了css modules 以便直接在组件中使用css。当然这一切都是在使用webpack进行编译打包的情况下。

这个Demo十分简单,特别适合React初学者食用,相信会对你的React学习有所帮助!

如何运行

  1. 从我的github上clone到本地;
  2. 进入Demo根目录, 执行npm init 安装依赖;
  3. 安装完毕后,执行 npm run build 进行构建;
  4. 在Chrome浏览器(下载功能只能在Chrome中使用,所以…)中打开index.html。

至此,你可以体验这个简单的Demo了。

像什么

如果你觉得在你的机器上run很麻烦,或者你只是想看看长得怎么样。

在浏览器器中打开,是这个样子的:

初始化效果

我承认的确很简单,简单到显得简陋了!接下来你可以选左下角的选择文件按钮来选择任何一张图片,比如我选择了一张图片后:

初始化图片

任何被选中的图片都会被居中显示,宽高都会适应600*400的图片操作区域。现在,可以对图片进行操作了:

处理后

我们选择对图片的R、G、B、以及透明度进行调整,实时调整的效果将会在左侧的图片区域实时显示出来。

第四步,点击图片区下的按钮,就可以吧处理过的图片下载到本地了,我们打开下载后的图片和处理的图片进行对比,就像这样:
保存与对比

至此,我已经演示完了所有的功能。

不足

如果你细心一点的话,你会发现这个Demo还有很多问题:

  1. 我们导入任何宽高的图片,其都会被自适应到框中,所以处理后的图片品质会下降。
  2. 保存图片只能在Chrome浏览器中进行,已测试在Firfox中无法使用这个功能。
  3. 右侧的工具栏在选择新图片后不会被初始化。
  4. 功能单一。
  5. 界面简陋

你需要注意的是

如果你想学习React和canvas,那么我希望我的这个Demo会对你有所帮助,这里提几个需要注意的点,这些点也是我在开发过程中遇到的问题:

  1. 如何使用input file来选择一张图片并绘制到canvas中。
  2. 如何保存图片。
  3. 图片在React中绘制的时机。
  4. 如何使用redux进行数据管理,特别是如何使用带参数的action。
  5. 你所关注的。

未来

这虽然是一个很简单的Demo,但是我会在此基础上进行继续跟进,现在能想到的是解决上面提到的不足,比如设置两种模式,处理图片品质下降的问题;兼容主流浏览器;增添新功能;修改工具栏的状态初始化的bug;以及其它我以后能够想到并且我能够实现的。

以及…我目前有想法开发一个可交互的视频编辑器,有兴趣的同学可以关注下咯!

写到后面

还有不到3个小时我就21岁了,想想前面走过的20年,尤其是上大学的三年来,感慨颇多。谢天谢地,就算无论如何,我都完好无损的度过了。接下来的一岁中,我将面临人生中一个个重大的转折点,实习、毕业、工作、走向社会。从小到大,我对我所有的事情做出选择,接下来,也不例外。我做好准备了,并且一直在准备着!

共勉!

新!

5.28日

  1. 解决了再次选择图片工具栏初始化的问题;
  2. 工具栏的调节精度下沉到0.01;
  3. 修改页面细节。

现在看起来长这样!
新的页面

6.3日

  1. 同样的功能,不同的界面和实现方式,采用react但是去除redux使用state进行状态管理;
  2. 操作更加主流和人性化;
  3. 已知BUG,下载某些图片的时候可能会失败,暂不知原因。

新版地址:https://github.com/xiaomoer/picture-editor-with-canvas

看起来是这样的:

还有这样:

加油!

分享到 评论