前言1024程序员节快到了,我们借此机会为社区的吉祥物四福猫实现了一个编辑器,暂时命名为【四福猫拼接怪兽】,唯一遗憾的是素材没有精确到手脚DemoPC在线体验效果图实现思路左侧面板提供了一些四福猫的部件(耳朵、鼻子等),区域用户可以调整部件的位置、大小、图层,然后设计出自己喜欢的四福猫。用于准备工作的拖放库可移动导出图片。使用html2canvas系统架子直接使用antdesignpro基础架子核心代码页面布局等具体实现细节这里不再赘述。我们只列出一些核心相关的代码。在左侧面板上传图片并转换为base64constgetBase64=(img:RcFile,callback:(url:string)=>void)=>{constreader=newFileReader();reader.addEventListener('load',()=>callback(reader.resultasstring));reader.readAsDataURL(img);};节点拖动依赖moveable这个插件
