为了一键式构图,利用canvas做了一个海报生成器

接着上篇文章中为了展示AI模型对图片处理的前后效果,我借助 PPT 做了几个对比图来演示

对比图中:一个标题 + N张图 + 对每张图做圆角以及边框处理
在这里插入图片描述

这类操作对我来说,后面要处理的频率比较高,因此有了想把操作自动化的 idea

说干就干,最快方式莫过于用代码构建一个网页,生成类似布局的海报生成器:用户只需提供所需图片以及文字(还需不要对上传图片数量进行限制),就可以生成对应的效果,并且提供海报一键下载入口,将目标渲染的页面效果转坏为图片方式保存在本地

经过几个小时的开发,页面效果如下:
在这里插入图片描述
整个海报生成器已作为附属功能集成到到旧闻提到的demo中
在这里插入图片描述

海报生成器主要依托于一个 js 三方包 html2canvas,将网页中选定的区域页面 基于 DOM 进行“截图”,最终转化为 canvas 图像,然后依附于js IO 相关三方库,将对应图片保存到本地;其它图片上传以及页面布局展示是基于功能本身开发的,为一些 css 样式布局

关于 ht

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小张Python1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值