前端js获取阿里云oss私有图片加参数及生成签名signature

项目背景

阿里云对象存储OSS，只需要上传一张原始图片，就能通过简单的url携带参数的形式，获取各种操作之后的图片，可以说是非常方便了。

如果公开的oss，存取非常方便，图片路径之后可以直接携带图片处理参数，简单的获取图片，本篇文章不做考虑。

对于不允许匿名访问的私有图片文件，不支持通过文件URL直接添加参数的方式处理图片，我们需要通过SDK的方式将图片处理操作加入签名URL中。

阿里云官方文档，图片处理方式（参考链接在文末）

但是官网并没有提供前端以及小程序端的sdk，前端需要自行进行签名。

前置准备

1.前端签名需要一个阿里云提供的签名库，点击我的资源链接或者直接去下载。

阿里云oss签名sdk

2.region：region填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。

3.accessKeyId：阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。

4.accessKeySecret

5.bucket： bucketname填写存储空间名称

除了第一项，后几项都可以在阿里云oss控制台中找到相关信息。

进行签名

1.由于js库是es5，此处使用require引入 

  var OSS = require('../lib/ali-oss-sdk.min.js');

2.执行签名

var OSS = require('../lib/ali-oss-sdk.min.js')        





        const client = new OSS({
          // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
          region: 'yourregion,
          // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
          accessKeyId: 'LTAsadfawdfasdfasfasdfasdfasf',
          accessKeySecret: 'asdfasdfdsafasdfasdf',
          // yourbucketname填写存储空间名称。
          bucket: 'yourbucketname'
        });
        let url = 'admin/4b0c527b-50cb-40c8-ae1c-270cfa9562d0_3ad13bed-9037-4b34-a2de-430c70fd491e_主菜单-主菜单底部广告图.png'

        // 添加自定义参数，获取一个宽度为60的图片
        const signUrl = client.signatureUrl(url, {expires: 600, 'process' : 'image/resize,w_60'});

        console.log('签名前：' + url)
        console.log('签名后：' + signUrl)

运行结果

粘贴签名后的图片地址，下载，获取一个60的小图

参考资料

阿里云图片处理方式

阿里云图片处理参数

阿里云oss签名sdk