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

前言

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

在调研中发现了 veImageX 这款产品可以支持此能力，veImageX 是火山引擎推出的一款的图片解决方案，具备存储、分发、图像处理等完整的云 + 端一体化能力，其下的创意魔方具备图片、文字、二维码、背景等元素的合成，支持在线编辑模板 + 云端生成图片的能力，并提供了完善的 OpenAPI 可用于搭建自己的平台。

因此，本文基于 veImageX 搭建一个海报生成平台，目标是能够灵活替换其中的文案、图片等元素，支持预览和一键导出图片，本文重点记录一下操作的过程；

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

促销链接点这里：

开通服务

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

创作模板

1. 新建样式

   1. 点击新建样式-选择服务-填写名称-设置尺寸；

   

   1. 注意：请选择服务状态为正常的服务，可在服务管理页面查找服务状态；

   

2. 创作模板

   veImageX 支持图片、文字、二维码、背景四种类型的元素，能够满足绝大多数的创作场景。可参考 帮助文档，以下补充几点我的经验：

   1. 海报底图通常是固定不变的，建议将其设置为背景元素，背景元素为不可变元素，可防止创作过程中的误操作；

   2. 图片、文字、二维码都是可替换元素，建议设置有意义的元素名称；

   

   1. 二维码有文字和链接两种类型，注意不要选错；

   2. 创建样式时可根据底图尺寸设置样式尺寸，编辑过程中底图过长或图片尺寸不符合要求，可使用图片裁剪能力；

3. 保存模板

   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，参数如下：

请求参数：

参数	类型	参数类型	是否必填	描述
Action	String	Query	是	接口名：取值GetImageStyleResult
Version	String	Query	是	版本号：2018-08-01
ServiceId	String	Query	是	服务ID，用于计量计费和渲染结果的存储。服务ID和样式绑定的服务ID均需属于调用账号，否则无权限处理
StyleId	String	JSON	是	待渲染的样式ID
Params	JSON Map	JSON	否	样式中动态要素的取值。Key为String类型，取值要素ID；Value为String类型，取值动态要素的值（图片地址、文本/二维码内容）
OutputFormat	String	JSON	否	渲染结果编码格式。可选取值：JPEG、WEBP、PNG、HEIC。默认使用样式中定义的格式
OutputQuality	Integer	JSON	否	渲染结果编码质量参数。默认使用样式中定义的质量参数

返回参数：

参数	类型	描述
ResUri	String	渲染结果的URI
RenderDetail	JSON Array	渲染详情

RenderDetail：

参数	类型	描述
Element	String	渲染失败的要素ID
ErrMsg	String	渲染失败的原因

代码示例：

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 获取样式详情，用于获取可替换的元素

请求参数：

参数	类型	参数类型	是否必填	描述
Action	String	Query	是	接口名：取值GetImageStyleDetail
Version	String	Query	是	版本号：2018-08-01
StyleId	String	Query	是	样式ID

返回参数：

参数	类型	描述
Style	JSON Object	样式结构

上传图片

样式模板中存在可被替换的图片元素，因此平台需要支持本地上传图片的能力。项目中基于 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。由于部署流程比较简单且网上教程很多，这里不再赘述，可参考官方文档。

效果

平台效果如下，输入替换文案、图片等元素，点击预览即可查看合成后的新海报，支持下载到本地。可参考平台代码。

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

整体效果不错~~

文章为原创文章，若有侵权请联系；