业余时间开发了个海报编辑器

简介: 为了满足撰写博客或录制教程视频时对高质量海报的需求,我利用业余时间开发了一款海报编辑器。第一版功能简单,支持固定尺寸、黑底白字的标题。后来经过优化,增加了背景图、模糊效果、文字样式调整等功能,使海报更具吸引力。目前该编辑器已上线,欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)

业余时间开发了个海报编辑器

需求

因为有时候需要写篇博客文章或者录制个教程视频。需要首图的海报,不然没办法发布,再一个就是一个好的海报还是可以挺高用户对文章的吸引力的,之前我都是在网上找的那种在线编辑器制作的,比如创可贴,Canvas这种海报工具网站,但是吧,有个问题是只能制作简单的海报,稍微复杂点的就需要充值,但是对我也没啥影响,因为我一直都是用的最基础的,一直在使用黑底白字,简直是基础中的超基础,因为简单嘛,文字也足够醒目。这倒是也没啥,唯一让我感到不爽的是过几天就需要登录,这个真实贼烦,所以我就想着,反正我用的都是最简单的,为毛不自己用代码实现一个工具,直接导出图片的。

其实需求也很简单,就是固定的海报尺寸,比如公众号海报尺寸是首图:900px*383px,B站封面及视频:1280px*800px,小红薯竖版封面:1242px*1660px(3:4),然后可以打上标题,标题自动居中,字体颜色白色,背景黑色即可。

目的:开箱即用

实现第一版

然后就花了2个小时时间写了第一版的编辑器,及其的简单。如图示例。然后我后面文章所以的封面图片都是用这个生成的,也还可以。

请在此添加图片描述

实现第二版

但是就在前几天突然有了个想法,想再优化一版。因为感觉之前的那一版太素了,没有吸引力,那么大部分人对图片的第一吸引力在哪呢?我感觉应该是背景和字体相关,所以初步的需求就有了。

新需求如下:

  • 支持背景图
  • 背景图可以模糊
  • 支持文字
  • 文字自动居中
  • 文字支持修改字体大小
  • 文字支持修改字体样式
  • 背景图支持透明度
  • 背景图支持更改背景颜色
  • 支持导出PNG,JPG图片
  • 增加一键更改背景图片,高清图,本地图片
  • 支持修改文字颜色
  • 支持自定义图片尺寸
  • 预设多个自定义尺寸

请在此添加图片描述

这样看,两个图片对比是不是就显的后者更加的强烈。

海报编辑器地址

https://tool.share888.top/#/poster

虽然还有一些bug存在,后面有空再优化吧。

目录
相关文章
|
7月前
|
JSON 数据可视化 图形学
Graphix: 轻量级、可插拔、OOP 式图形编辑器开发引擎
A lightweight, pluggable, object-oriented programming (OOP) style graphic editor development engine / 一个轻量级、可插拔、OOP 式图形编辑器开发引擎
136 2
|
18天前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
55 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
171 0
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
109 0
|
6月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
130 4
|
2月前
|
运维 Java Linux
【运维基础知识】掌握VI编辑器:提升你的Java开发效率
本文详细介绍了VI编辑器的常用命令,包括模式切换、文本编辑、搜索替换及退出操作,帮助Java开发者提高在Linux环境下的编码效率。掌握这些命令,将使你在开发过程中更加得心应手。
39 2
|
5月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
674 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
7月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
83 1
基于HTML5开发的Markdown在线编辑器
|
7月前
|
API 开发工具 C++
【专栏:工具与技巧篇】使用代码编辑器(VS Code/Sublime Text)提升开发效率
【4月更文挑战第30天】在VS Code与Sublime Text两大流行代码编辑器中,开发者可借助其高效特性提升编程效率。VS Code拥有丰富的插件生态、内置Git集成、强大的调试工具、智能提示和多文件导航功能。Sublime Text则以其轻量级、快速响应、多光标编辑及自定义构建系统见长。学习编辑器的键盘快捷键、自定义配置、使用内置终端以及键绑定和宏,将助开发者进一步提高开发效率。选择适合自己的编辑器并不断适应新技术是提升开发工作流的关键。
318 1
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
986 0