开发者社区 问答 正文

JavaScript-SDK之如何实现图片处理(一)?

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

图片处理基础功能


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



图片处理使用


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

匿名访问


如果图片文件(Object)的访问权限是 公共读 ,如下表所示的权限,则可以匿名访问图片服务。
Bucket权限Object权限
公共读私有写(public-read)或 公共读写(public-read-write)默认(default)
任意权限公共读私有写(public-read)或 公共读写(public-read-write)

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

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

自定义样式,使用如下格式的三级域名匿名访问图片处理: http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name
  • style:用户自定义样式系统保留标志符
  • name:自定义样式名称,即控制台定义样式的 规则名

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

通过级联处理,可以对一张图片顺序实施多个操作,格式如下: http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value/action,parame_value/...

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

图片服务也支持HTTPS访问,例如: https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100


授权访问


对私有权限的文件(Object),如下表所示的权限,必须通过授权才能访问图片服务。
Bucket权限Object权限
私有读写(private)默认权限(default)
任意权限私有读写(private)

生成带签名的图片处理的URL代码如下: var OSS = require('ali-oss');
var client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
});
// 过期时间10分钟, 图片处理式样"image/resize,w_300"
var signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
console.log("signUrl="+signUrl);


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






展开
收起
青衫无名 2017-10-19 09:49:39 2142 分享 版权
0 条回答
写回答
取消 提交回答