前言

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

参数类型参数类型是否必填形容
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 上应用；

整体成果不错~~

文章为原创文章，若有侵权请分割；