创建图案

概述

Sprites通过减少网络管理费和绕行下载限制提高用户经验的伟大方法

sprite为单图像,内含垂直图像集浏览器下载单图象CSS系统代码为浏览器提供图文中图像坐标

云化生成图象和对应cs文件

举例说,假设你上传 一套企业标识到您的网站你可以给他们标签sprite路由易生成图文并包含所有图文

上传时可分配资产标签,使用云控制台或上传API增删现有资产标签看吧标签图片并标签标签方法获取更多细节

创建图案

上传图像并分配标签后,所有想合并成图文的图像都准备动态创建

sprite和对应CSS代码自动生成时提供动态sprite URL按需生成sprite

举个例子 四个标识上传演示文集产品环境公有标识amazon-logo,apple_logo,微软logo并google_log并sprite路由标签分配全部URL交付生成图例

可以看到,单垂直图像创建所有四种标识,按字母顺序公用标识

要使用HTML代码中的图文,你需要引用生成的CSS图文,该图文的URL与图文图像相同,但用图文图像sss扩展名 :

生成的CSS和PNG文件通过CDN自动分布并智能缓存注意图象和css都生成.pngURL或.cssURL网站

如你所见,CSS包括四种标识中每一种样式类名样式类名为上传图像资产公共标识

显示图文图像,页面中包括CSS并使用相关样式类名例子显示亚马逊标识使用以下HTML代码

管理sprite版本

内容修改时,你可能想再生图案上例中,当添加第五位标识或用质量更高或新设计替换四位标识中的一位时,您会想重生sprite

在这种情况下,你可能希望用户在图像生成后立即看到更新图像sprite资产已经在用户浏览器和CDN中缓存需要版本管理,以确保立即更新sprite并同时使用高性能缓存和交付技术

sprite生成时即分配版本,该版本以创建时间为基础您应该使用此版本访问sprite的CSS以此方式,您的用户总能得到最更新图案

寄出HTTPPPOST请求端点演示文集带云名https://api.www.aaaalireno.com/v1_1/demo/image/sprite或使用相关SDK图例助手法

详细需求参数和可选参数以及SDK语法示例见样板化方法中上传ai引用.

上头状图方法调回JSON并存URL访问生成图象和css,包括版本v分量 :

要使用HTML代码中的图文,简单链接到HTML页面生成的CSS:

应用变换图例

上举4个标识的例子中,你可能注意到每个标识的大小不同。如果要显示共享维度相关图像,你可能想先变换图像后再合并成单图

生成图案时可提供变换指令(无论是使用API生成图案或访问动态URL图案)。云形将按指令变换所有图像并生成图文并配有原创图像变换版

例举, 下URL会提供四张图文并标有'标识标识标签同时转换每个标识适配150x60容器 :

添加自定义前缀发送css文件

可能需要避免与样式类名或网站相冲突(用于其他图或静态内容)。很容易通过添加a避免碰撞前缀sprite URL中参数 :

时此特殊p_参数使用,生成CSS加法my_sprite表示所有样式类名称前缀

网站显示图像参考类名

横向传送图案

sprite垂直生成,当用sprite从sprite传送单个图像主用案例时,方向无关紧要利用自动生成图文提供全图文作为网站单图像,例如动态生成工具栏或用同标签缩略图预览图像

如果要横向交付全图象,则使用旋转变换取回特征实现此目标

1. 生成初始图案时,除您可能想应用的其他变换外,使用角形变换图像逆时针旋转90度下方图像带sprite动物类重新缩放标签填充85x85px方块并圆角并旋转反时钟
   
2. 页面中发送图案时使用取回交付类型交付生成图象URL应用90度时钟变换