数字资产管理
创建图案
最新更新时间:Nov-21-2023
概述
Sprites通过减少网络管理费和绕行下载限制提高用户经验的伟大方法
sprite为单图像,内含垂直图像集浏览器下载单图象CSS系统代码为浏览器提供图文中图像坐标
云化生成图象和对应cs文件
举例说,假设你上传 一套企业标识到您的网站你可以给他们标签sprite路由易生成图文并包含所有图文
上传时可分配资产标签,使用云控制台或上传API增删现有资产标签看吧标签图片并标签标签方法获取更多细节
创建图案
上传图像并分配标签后,所有想合并成图文的图像都准备动态创建
sprite和对应CSS代码自动生成时提供动态sprite URL按需生成sprite
举个例子 四个标识上传演示文集产品环境公有标识amazon-logo,apple_logo,微软logo并google_log并sprite路由标签分配全部URL交付生成图例
可以看到,单垂直图像创建所有四种标识,按字母顺序公用标识
要使用HTML代码中的图文,你需要引用生成的CSS图文,该图文的URL与图文图像相同,但用图文图像sss扩展名 :
https://res.www.aaaalireno.com/demo/image/sprite/logo.css.amazon_logo, .apple_logo, .google_logo, .microsoft_logo {
background: url('//res.www.aaaalireno.com/demo/image/sprite/v1630230323/sprite_logo.png') no-repeat;
}
.amazon_logo { background-position: 0px 0px; width: 162px; height: 38px; }
.apple_logo { background-position: 0px -40px; width: 206px; height: 250px; }
.google_logo { background-position: 0px -292px; width: 275px; height: 95px; }
.microsoft_logo { background-position: 0px -389px; width: 216px; height: 70px; }生成的CSS和PNG文件通过CDN自动分布并智能缓存注意图象和css都生成.pngURL或.cssURL网站
如你所见,CSS包括四种标识中每一种样式类名样式类名为上传图像资产公共标识
显示图文图像,页面中包括CSS并使用相关样式类名例子显示亚马逊标识使用以下HTML代码
<link rel="stylesheet" type="text/css" href="https://res.www.aaaalireno.com/demo/image/sprite/sprite_logo.css">
...
...
<div class="amazon_logo"></div>
管理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分量 :
{
css_url: 'https://res.www.aaaalireno.com/demo/image/sprite/v1315740225/sprite_logo.css',
image_url: 'https://res.www.aaaalireno.com/demo/image/sprite/v1315740225/sprite_logo.png',
secure_css_url:
'https://res.www.aaaalireno.com/demo/image/sprite/v1315740225/sprite_logo.css',
public_id: 'sprite_logo',
version: '1315740225',
}要使用HTML代码中的图文,简单链接到HTML页面生成的CSS:
<link href="https://res.www.aaaalireno.com/demo/image/sprite/v1315740225/sprite_logo.css"
media="screen" rel="stylesheet" type="text/css" />应用变换图例
上举4个标识的例子中,你可能注意到每个标识的大小不同。如果要显示共享维度相关图像,你可能想先变换图像后再合并成单图
生成图案时可提供变换指令(无论是使用API生成图案或访问动态URL图案)。云形将按指令变换所有图像并生成图文并配有原创图像变换版
例举, 下URL会提供四张图文并标有'标识标识标签同时转换每个标识适配150x60容器 :
添加自定义前缀发送css文件
可能需要避免与样式类名或网站相冲突(用于其他图或静态内容)。很容易通过添加a避免碰撞前缀sprite URL中参数 :
时此特殊p_参数使用,生成CSS加法my_sprite表示所有样式类名称前缀
.my_sprite_google_logo, .my_sprite_apple_logo,
.my_sprite_microsoft_logo, .my_sprite_amazon_logo {
background:
url('https://res.www.aaaalireno.com/demo/image/sprite/p_my_sprite_/v1315743843/sprite_logo.png')
no-repeat;
}
.my_sprite_google_logo {
background-position: 0px 0px; width: 275px; height: 95px;
}
.my_sprite_apple_logo {
background-position: 0px -97px; width: 206px; height: 250px;
}
.my_sprite_microsoft_logo {
background-position: 0px -349px; width: 216px; height: 70px;
}
.my_sprite_amazon_logo {
background-position: 0px -421px; width: 162px; height: 38px;
}网站显示图像参考类名
<div class="my_sprite_amazon_logo"/>横向传送图案
sprite垂直生成,当用sprite从sprite传送单个图像主用案例时,方向无关紧要利用自动生成图文提供全图文作为网站单图像,例如动态生成工具栏或用同标签缩略图预览图像
如果要横向交付全图象,则使用旋转变换取回特征实现此目标
- 生成初始图案时,除您可能想应用的其他变换外,使用
角形变换图像逆时针旋转90度下方图像带sprite动物类重新缩放标签填充85x85px方块并圆角并旋转反时钟
- 页面中发送图案时使用取回交付类型交付生成图象URL应用90度时钟变换
