前言

618 年中促销即将来临，很多公司都会通过海报来宣传自己的促销方案，通常情况下海报由设计团队基于 PS、Sketch 等工具创作，后期若想替换海报文案、商品列表等内容则需打开原工程进行二次创作，修改门槛高且不够便捷。由于公司的促销列表每日上新，急需一种简单快捷的方式来修改并生成新的海报，以及公司小程序图片分享获客需要海报分享并进行引流，因此，调研了一些云端图片合成并生成海报的方案；

在调研中发现了 veImageX 这款产品可以支持此能力，veImageX 是火山引擎推出的一款的图片解决方案，具备存储、分发、图像处理等完整的云 + 端一体化能力，其下的创意魔方具备图片、文字、二维码、背景等元素的合成，支持在线编辑模板 + 云端生成图片的能力，并提供了完善的 OpenAPI 可用于搭建自己的平台。
因此，本文基于 veImageX 搭建一个海报生成平台，目标是能够灵活替换其中的文案、图片等元素，支持预览和一键导出图片，本文重点记录一下操作的过程；

额外需要提一下，目前veImageX还有一些特惠促销，生成海报所需的流量和存储资源包均有较大折扣，比如可1元购 100GB流量或 50GB存储，也可以按需采购；

促销链接点这里：

开通服务

找到他们的官网，点击这里可以直接进去，火山引擎，开通 veImageX；
创建服务并绑定域名，这一步可以参考官方文档，创建服务可以理解为创建一个存储空间，绑定域名，理解为需要一个访问的地址；
进入 veImageX 创意魔方页面，根据提示开通该项能力。

创作模板

新建样式
1. 点击新建样式-选择服务-填写名称-设置尺寸；
1. 注意：请选择服务状态为正常的服务，可在服务管理页面查找服务状态；
创作模板
veImageX 支持图片、文字、二维码、背景四种类型的元素，能够满足绝大多数的创作场景。可参考帮助文档，以下补充几点我的经验：
1. 海报底图通常是固定不变的，建议将其设置为背景元素，背景元素为不可变元素，可防止创作过程中的误操作；
2. 图片、文字、二维码都是可替换元素，建议设置有意义的元素名称；
1. 二维码有文字和链接两种类型，注意不要选错；
2. 创建样式时可根据底图尺寸设置样式尺寸，编辑过程中底图过长或图片尺寸不符合要求，可使用图片裁剪能力；
保存模板
1. 在编辑过程中样式会自动保存，为防止意外发生，退出前可点击左上角（或 Command + S / Ctrl + S）手动保存;
2. 点击右上角预览按钮，预览云端渲染效果；
3. 每个样式模板都有唯一的 StyleId，创作完成后可在“我的样式”页面查看并保存。

项目搭建

项目基于 Next.js 搭建，主要依赖项如下：

框架：Next.js
上传 SDK：tt-uploader
OpenAPI SDK：@volcengine/openapi

如有需要可基于该项目模板搭建自己的海报平台。

访问 OpenApi

项目中依赖 veImageX 提供的 OpenAPI 来提交模板参数并拿到合成图片的 URL，本文借助 @volcengine/openapi 访问 OpenAPI，SDK 依赖用户的 AK、SK （可在密钥管理页面获取）生成签名用于鉴权。以下是项目中用到的两个 API：

GetImageStyleResult

请求方式：HTTP POST
接口描述：提交合成任务，获取合成后的图片 URL，参数如下：
请求参数：

返回参数：

RenderDetail：

代码示例：

import { imagex } from '@volcengine/openapi';

const imagexService = imagex.defaultService;
imagexService.setAccessKeyId("xxx");
imagexService.setSecretKey("xxx");

const GetImageStyleResult = imagexService.createUrlEncodeAPI('GetImageStyleResult', {
  method: 'POST',
  contentType: 'json',
  queryKeys: ['Action', 'Version', 'ServiceId']
});

const result = await GetImageStyleResult({
  ServiceId: '',
  StyleId: '',
  Params: {},
});

GetImageStyleDetail

请求方式：HTTP GET
接口描述：根据 StyleId 获取样式详情，用于获取可替换的元素
请求参数：

返回参数：

上传图片

样式模板中存在可被替换的图片元素，因此平台需要支持本地上传图片的能力。项目中基于 tt-uploader 实现上传功能。
上传 SDK 在端上访问 OpenAPI 获取上传地址，为防止端上泄露 AK/SK，因此需要由服务生成临时的 Token 下发到端上，SDK 基于临时 Token 生成签名访问 OpenAPI。项目中基于 @volcengine/openapi SDK 签发临时的 Token，示例代码如下：

import { imagex } from '@volcengine/openapi';

const imagexService = imagex.defaultService;
imagexService.setAccessKeyId('xxx'); //这里是要填写ak和sk的地方；
imagexService.setSecretKey('xxx');

const token = imagexService.GetUploadAuth({
serviceIds: [], // 仅允许上传到指定的服务ID，若无此限制，传递空数组即可
expire: 5 * 60 * 1000, // 临时密钥过期时间（单位为毫秒），默认为1小时
});

项目部署

项目基于 Next.js 开发，因此部署在 Vercel 上，Vercel 支持一键部署，且部署后自动生成预览 URL。由于部署流程比较简单且网上教程很多，这里不再赘述，可参考官方文档。

效果

平台效果如下，输入替换文案、图片等元素，点击预览即可查看合成后的新海报，支持下载到本地。可参考平台代码。
(干货)基于 veImageX 搭建海报生成平台 -- 附源码-LMLPHP

代码已经放到github上了，如果有需要的朋友，可以直接git 上使用；

整体效果不错~~

七脉神剑

(干货)基于 veImageX 搭建海报生成平台 -- 附源码

前言