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

10,601 阅读6分钟

前言

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

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

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

促销链接点这里:

开通服务

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

创作模板

  1. 新建样式

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

    3. 注意:请选择服务状态为正常的服务,可在服务管理页面查找服务状态;

  2. 创作模板

      veImageX 支持图片、文字、二维码、背景四种类型的元素,能够满足绝大多数的创作场景。可参考 帮助文档,以下补充几点我的经验: 2. 海报底图通常是固定不变的,建议将其设置为背景元素,背景元素为不可变元素,可防止创作过程中的误操作;

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

    5. 二维码有文字和链接两种类型,注意不要选错;

    1. 创建样式时可根据底图尺寸设置样式尺寸,编辑过程中底图过长或图片尺寸不符合要求,可使用图片裁剪能力;
  3. 保存模板

    1. 在编辑过程中样式会自动保存,为防止意外发生,退出前可点击左上角(或 Command + S / Ctrl + S)手动保存;

    2. 点击右上角预览按钮,预览云端渲染效果;

    3. 每个样式模板都有唯一的 StyleId,创作完成后可在“我的样式”页面查看并保存。

项目搭建

项目基于 Next.js 搭建,主要依赖项如下:

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

访问 OpenApi

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

GetImageStyleResult

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

参数类型参数类型是否必填描述
ActionStringQuery接口名:取值GetImageStyleResult
VersionStringQuery版本号:2018-08-01
ServiceIdStringQuery服务ID,用于计量计费和渲染结果的存储。服务ID和样式绑定的服务ID均需属于调用账号,否则无权限处理
StyleIdStringJSON待渲染的样式ID
ParamsJSON MapJSON样式中动态要素的取值。Key为String类型,取值要素ID;Value为String类型,取值动态要素的值(图片地址、文本/二维码内容)
OutputFormatStringJSON渲染结果编码格式。可选取值:JPEG、WEBP、PNG、HEIC。默认使用样式中定义的格式
OutputQualityIntegerJSON渲染结果编码质量参数。默认使用样式中定义的质量参数

返回参数:

参数类型描述
ResUriString渲染结果的URI
RenderDetailJSON Array渲染详情

RenderDetail:

参数类型描述
ElementString渲染失败的要素ID
ErrMsgString渲染失败的原因

代码示例:

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 获取样式详情,用于获取可替换的元素 请求参数:

参数类型参数类型是否必填描述
ActionStringQuery接口名:取值GetImageStyleDetail
VersionStringQuery版本号:2018-08-01
StyleIdStringQuery样式ID

返回参数:

参数类型描述
StyleJSON 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 上使用;

整体效果不错~~

文章为原创文章,若有侵权请联系;