全部产品
弹性计算 会员服务 网络 安全 移动云 数加·大数据分析及展现 数加·大数据应用 管理与监控 云通信 阿里云办公 培训与认证 智能硬件 ET大脑
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 更多
对象存储 OSS

图片处理

更新时间:2018-07-16 16:06:20

OSS图片处理,是OSS对外提供的海量、安全、低成本、高可靠的图片处理。用户将原始图片上传保存到OSS,通过简单的 RESTful 接口,在任何时间、任何地点、任何互联网设备上对图片进行处理。图片处理提供图片处理接口,图片上传请使用上传接口。基于OSS图片处理,用户可以搭建自己的图片处理服务。

图片处理基础功能

OSS图片处理提供以下功能:

图片处理使用

图片处理使用标准的 HTTP GET 请求来访问,所有的处理参数是编码在 URL 中的QueyString。

匿名访问

如果图片文件(Object)的访问权限是 公共读 ,如下表所示的权限,则可以匿名访问图片服务。

Bucket权限 Object权限
公共读私有写(public-read)或
公共读写(public-read-write)
默认(default)
任意权限 公共读私有写(public-read)或
公共读写(public-read-write)

通过如下格式的三级域名匿名访问图片处理:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,param_value
  • bucket:用户的存储空间(bucket)名称
  • endpoint:用户存储空间所在数据中心的访问域名
  • object:用户上传在OSS上的图片文件
  • image:图片处理保留标志符
  • action:用户对图片做的操作,如缩放、裁剪、旋转等
  • param:用户对图片做的操作所对应的参数

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

自定义样式,使用如下格式的三级域名匿名访问图片处理:

  1. http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name
  • style:用户自定义样式系统保留标志符
  • name:自定义样式名称,即控制台定义样式的 规则名

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100

通过级联处理,可以对一张图片顺序实施多个操作,格式如下:

  1. http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value/action,param_value/...

例如:

  1. http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90

图片服务也支持HTTPS访问,例如:

  1. https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

授权访问

对私有权限的文件(Object),如下表所示的权限,必须通过授权才能访问图片服务。

Bucket权限 Object权限
私有读写(private) 默认权限(default)
任意权限 私有读写(private)

生成带签名的图片处理的URL代码如下:

  1. let OSS = require('ali-oss');
  2. let client = new OSS({
  3. accessKeyId: '<accessKeyId>',
  4. accessKeySecret: '<accessKeySecret>',
  5. bucket: '<bucketName>',
  6. endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
  7. });
  8. // 过期时间10分钟, 图片处理式样"image/resize,w_300"
  9. let signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
  10. console.log("signUrl="+signUrl);

提示:

  • 授权访问支持 自定义样式HTTPS级联处理
  • 指定过期时间expires的单位是秒

SDK访问

对于任意权限的图片文件,都可以直接使用 SDK 访问图片、进行处理。

提示:

  • SDK处理图片文件支持 自定义样式HTTPS级联处理

基础操作

图片处理的基础操作包括,获取图片信息格式转换缩放裁剪旋转效果水印等。

  1. let OSS = require('ali-oss');
  2. let client = new OSS({
  3. accessKeyId: '<accessKeyId>',
  4. accessKeySecret: '<accessKeySecret>',
  5. bucket: '<bucketName>',
  6. endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
  7. });
  8. // 缩放
  9. async function scale () {
  10. try {
  11. let result = await client.get('example.jpg', './example-resize.jpg', { process: 'image/resize,m_fixed,w_100,h_100'});
  12. } catch (e) {
  13. console.log(e);
  14. }
  15. }
  16. // 裁剪
  17. async function cut () {
  18. try {
  19. let result = await client.get('example.jpg', './example-crop.jpg', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
  20. } catch (e) {
  21. console.log(e)
  22. }
  23. }
  24. // 旋转
  25. async function rotate () {
  26. try {
  27. let result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  28. } catch (e) {
  29. console.log(e);
  30. }
  31. }
  32. // 锐化
  33. async function sharpen () {
  34. try {
  35. let result = yield client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
  36. } catch (e) {
  37. console.log(e);
  38. }
  39. }
  40. // 水印
  41. async function watermark () {
  42. try {
  43. let result = yield client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  44. } catch (e) {
  45. console.log(e);
  46. }
  47. }
  48. // 格式转换
  49. async function format () {
  50. try {
  51. let result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  52. } catch (e) {
  53. console.log(e);
  54. }
  55. }
  56. // 图片信息
  57. async function info () {
  58. try {
  59. let result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'});
  60. } catch (e) {
  61. console.log(e);
  62. }
  63. }

自定义样式

提示:需要事先到oss控制台添加自定义式样example-sytle

  1. let OSS = require('ali-oss');
  2. let client = new OSS({
  3. accessKeyId: '<accessKeyId>',
  4. accessKeySecret: '<accessKeySecret>',
  5. bucket: '<bucketName>',
  6. endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
  7. });
  8. // 自定义样式
  9. async function style () {
  10. try {
  11. let result = await client.get('example.jpg', './example-custom-style.jpg', {process: 'style/example-sytle"'});
  12. } catch (e) {
  13. console.log(e);
  14. }
  15. }
  16. style();

级联处理

  1. let OSS = require('ali-oss');
  2. let client = new OSS({
  3. accessKeyId: '<accessKeyId>',
  4. accessKeySecret: '<accessKeySecret>',
  5. bucket: '<bucketName>',
  6. endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
  7. });
  8. // 级联处理
  9. async function cascade () {
  10. try {
  11. let result = await client.get('example.jpg', './example-cascade.jpg', {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
  12. } catch (e) {
  13. console.log(e);
  14. }
  15. }
  16. cascade();

图片处理工具

  • 可视化图片处理工具 ImageStyleViever ,可以直观的看到OSS图片处理的结果
  • OSS图片处理的功能、使用演示 页面
本文导读目录