跟着开源项目学习，一周时间用 React 写了一个用于制作封面的项目

[ARslince]

IMaker, 一款用于制作创造性的封面工具。

前段时间看到论坛里某位前辈发了帖子，分享了自己的开源项目，我也想学习一下，于是写了一周差不多基本的功能都完成了，在 README 里面有致谢，另外自己添加了一些新的功能，希望大家能提一些建议。

最后，请问大家写到这种程度，可以找到一个 React 开发的相关工作吗？目前一年工作经验左右。

体验链接

https://img-maker.vercel.app/

http://slince.atwebpages.com/

[Track13]

如果我是面试官，我问你这个项目的技术难点，你怎么回答。。

[ARslince]

我认为有三个难点：

第一：由于我使用了 NEXTUI 这个组件库，在实现用户上传图片这个功能的时候，用到了 Button 组件，它存在一些默认行为，所以有两个方式可以修复，一方面去找到对应的默认监听行为，删除它；另一种方式通过用 JS 单独写一个逻辑去手动调用点击事件的执行。

第二：关于下载图片功能，这里有两个小点，第一小点是关于状态管理，由于我整个项目分成了三个大组件，我选择了 Context 来进行状态管理，这里我用 Context 传递了了一个 ref 值和一个 download 方法，其中这个 download 接用了 dom-to-image 这个库，但是关键在于创建一个 a 标签，进而获取到它的 url ，从而实现这个 download 方法；第二小点就是组件见传递数据的时候，数据类型会丢失，这是一个细节，所以这里要定义一个类型，不然会有问题。

第三：关于撤销动作，这里我采用的是维护一个操作历史的状态来实现，基本逻辑就是监听键盘事件，从历史记录中移除最后一次的绘图，然后重新渲染剩余的组件。

最后，整个项目的难点，在于组件之间数据的传递，项目中使用了 useContext 来作为状态管理，从来实现，组件层级之间数据的传递

[Track13]

@ARslince 我写 vue 的，react 玩的少。说实话我觉得这个有点简单。不过有总比没有好。

[sibusana]

没做过面试官，难给出可以不可以的答案。在这路过给一些建议

问题
1. 遮罩的输入框可触发输入光标，但实际不可输入
2. 遮罩的边框没有跟随图片的形状改变

建议
1. 这个写字板功能上无误，但对于这个业务场景帮助甚少，因为难以用鼠标画出好看的图案。可以增加对线条、图案之类的支持？
2. 文本如果能够放大缩小，调整位置，对齐，支持 text balance 就更好了

[qloog]

作为后端的我，看着还挺不错的样子

[yueban5521]

UI 挺好看的

[ARslince]

@sibusana
谢谢前辈的建议，先回答一下前辈的两个问题，
1. 这里设计的就是不可输入的，后续我打算实现用户可自定义输入
2. 这个问题就是一个很好的建议，后面会考虑让遮罩边框颜色改变

关于前辈的两个建议，这两点我也都想到了，写字板的业务场景确实很少，所以会考虑增加一些其他的功能，最后就是关于文本放大缩小，调整位置也在设计开发当中了