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

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

对比图中：一个标题 + N张图 + 对每张图做圆角以及边框处理

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

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

经过几个小时的开发，页面效果如下：

整个海报生成器已作为附属功能集成到到旧闻提到的demo中

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

关于 html2canvas 功能核心代码为下面几行，这里 downloadjs 为一个下载库，目的是将canvas 图片下载到本地

import downloadjs from 'downloadjs';
import html2canvas from 'html2canvas';

// 指定需要生成图片的 DOM 区域
const canvas = await html2canvas(document.getElementById('canvas-id'));
const dataURL = canvas.toDataURL('image/png');
downloadjs(dataURL, 'download.png', 'image/png');

这里需要提前提个醒，html2canvas 由于是基于 DOM 生成截图的，部分CSS 样式不支持，因此在使用时可能会出现 生成的页面，部分元素/功能未渲染或混乱情况

关于这块warning，详情可以参考官网介绍