基于React和fabricjs开发的在线名片、海报设计器，大前端项目在线图片编辑器源码分享

大家好我是伟伟权
现在我给大家介绍一个我的前端项目
这是一个名片设计器
它是使用react加fabric js进行开发的
我们可以在这个画布上
设计我们自己的名片
我们可以添加姓名
然后添加电话
姓名和电话这都是一些
文字类型的信息
我们可以修改字体
修改字体的样式
我内置了大概80多个免费的字体
当我们切换的时候
会自动的生成最小化的中文字体
然后进行加载
然后我们可以修改字体的颜色
比如这里修改为红色
我们还可以修改背景颜色
比如说修改为个蓝色
然后修改背景的圆角
确定
这些名片的信息是唯一的
当我们再次点击添加姓名时
他就会自动的选中对应的信息
你可以复制信息
你也可以调整图层的顺序
置顶和置顶
然后你也可以删除这个名片信息
点击后退就可以后退一步
然后我们可以添加二维码
二维码你可以输入任意的文字
或者网址
网址的话就需要以http或者https作为开头
当我们使用手机识别的时候
它就会自动的打开网址
我们也可以添加联系人类型的二维码
比如我们输入姓名
输入电话
然后点击确定
这个二维码
当我们使用微信扫一扫的时候
他就会自动的打开一个联系人的页面
你可以把这个联系人
直接保存到手机的通讯录
然后你还可以添加任意的形状
常规的有圆形
三角形
矩形 多边形
我们还可以插入任意的svg格式
这里我下载一个svg图标演示一下
比如说我们搜索一个头像
任意下载一个svg图片
点击下载
插入svg
现在这个图形就已经插入了进来
你可以修改这个图形的颜色
然后在这个 SVG图标（口误）后面
添加你的联系人信息
然后是你还可以插入任意的文字
修改文字的字体
当我们设计好名片之后
你可以点击保存按钮
然后通过API上传到你自己的服务器
或者让用户下载下来
下面我介绍一下
在我实际项目中的一些案例
这是我做的一个小程序
在小程序中使用到了这个名片设计器
这里我任意的输入一个微信号
因为我当前这个微信账号
它是一个设计师权限
所以它可以发布模板
比如说我们在这里
添加姓名
然后调整字体
调整字体颜色
调一个白色吧
然后我们可以添加微信号
这里我也随便输一下ABC
然后字体的话我们选择一个
任意选择一个字体
颜色我们也调整一下
然后是手机号码
手机号码我们这里修改一下
点击可以修改
然后修改字体
修改颜色
当你的名片设计好之后
你可以发布模板
当我们点击发布模板之后
我们可以在这个模板页面
直接套用我们刚刚编辑好的名片
这里我先后退一步
这里我已经填写好的名片信息
当我们点击下一步的时候
选择模板
选择我们刚刚设计好的名片
点击选择
我们看我在前面表单上的个人信息
就会自动的进行替换
这是一个使用案例
另外就是这个项目使用的fabric js这个库
你可以把这个名片设计器
改成一个图片设计器
可以在线制作海报等等一些功能
这个前端项目就介绍到这里
如果你需要源码的话请联系我谢谢

i源码vx: 443580003