乐趣区

关于云计算:干货基于-veImageX-搭建海报生成平台-附源码

jiezi

前言

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 上应用；

整体成果不错~~

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

退出移动版