日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺
文檔
輸入文檔關鍵字查找
首頁 視覺智能開放平臺 開發參考 SDK參考 Web前端直接調用

Web前端直接調用

更新時間：
產品詳情
我的收藏

視覺智能開放平臺的API接口推薦使用SDK進行調用，推薦在服務端進行接入，在客戶端直接接入AccessKey ID和AccessKey Secret有泄漏風險，可以使用STS授權用戶調用服務。

背景信息

在進行Web調用之前，需要使用STS服務獲取臨時訪問憑證。阿里云STS（Security Token Service）是阿里云提供的一種臨時訪問權限管理服務。您可以通過STS服務給其他用戶頒發臨時訪問憑證，該用戶可使用臨時訪問憑證，在規定時間內調用視覺智能開放平臺的各項服務。臨時訪問憑證無需透露您的長期密鑰，保障您的賬戶更加安全。獲取臨時訪問憑證，請參見獲取角色的臨時身份憑證。

說明

阿里云視覺智能開放平臺各類目視覺AI能力API接入、接口使用或問題咨詢等，請通過釘釘群（23109592）加入阿里云視覺智能開放平臺咨詢群聯系我們。

方案一：若文件在上海地域OSS

若您的文件存放在上海OSS中，可以參見請求簽名的方式進行調用，本文以銀行卡識別（RecognizeBankCard）為例，僅展示關鍵步驟及關鍵代碼，完整的示例可下載WebDemo。如果您需要調用其他算法，請參見注釋并根據實際業務修改相應的代碼。

交互流程

image

前提條件

獲取STS臨時憑證：

  1. 授予權限：

    在獲取STS臨時憑證之前，調用者（RAM用戶和RAM角色）需要被授權有調用STS接口的權限。您可以通過設置RAM權限策略來實現這一點。相關的設置步驟和權限策略可參見使用STS臨時訪問憑證訪問OSS文檔。您需要根據實際需求配置更細粒度的授權策略，防止出現權限過大的風險。關于更細粒度的授權策略配置詳情，請參見視覺智能開放平臺自定義權限策略參考。

    重要

    為后續步驟進行，調用者（RAM用戶和RAM角色）需要被授權AliyunSTSAssumeRoleAccess（調用STS服務AssumeRole接口的權限）、AliyunVIAPIFullAccess（這里為了下列實例，給出的是管理視覺智能API的權限，但是在實際工作中，強烈建議您根據實際需求配置更細粒度的授權策略，防止出現權限過大的風險。關于更細粒度的授權策略配置詳情，請參見視覺智能開放平臺自定義權限策略參考）。

  2. 調用AssumeRole接口：

    使用已授權的RAM用戶或RAM角色調用AssumeRole接口，并按照接口文檔填寫必要參數。查閱AssumeRole接口的官方文檔以了解詳細的接口說明和使用方法。

  3. 使用STS Token：

    調用AssumeRole接口成功后，您會收到一個包含AccessKeyId、AccessKeySecret和SecurityToken的STS Token（如下代碼）。在實際調用其他阿里云服務的接口時，您需要將代碼中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替換為阿里云STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken。

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

步驟一：配置基本參數

下面提供的代碼段是調用阿里云的“銀行卡識別”服務，在WebDemo的js/script.js文件中。

  1. 準備API調用的參數：

    • AccessKeyId、AccessKeySecret、SecurityToken：首先，你需要替換<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>這三個變量為你通過用前提條件中獲取的STS Token的臨時訪問密鑰和安全令牌。

    • Endpoint：API的訪問域名，這里為ocr.cn-shanghai.aliyuncs.com。

    • Action：API操作名稱，這里為RecognizeBankCard，表示調用的是銀行卡識別服務。

    • API Version：API版本，這里為2019-12-30。

    • 特別注意要授予權限給RAM用戶或角色，以確保有權限調用視覺智能開放平臺的API。請參見前提條件中的授予權限。

  2. 構造請求參數對象：

    request_對象包含了API調用所需的系統參數（如簽名方法、時間戳、格式等）和業務參數（這里是待識別的銀行卡圖片URLImageURL）。

  3. 發起API請求：

    通過調用封裝好的callApiRequest函數，將準備好的請求參數、HTTP請求方法、API endpoint、STS Token的AccessKeySecret以及一個回調函數傳遞進去。回調函數用于處理API響應。

舉例來說，如果您希望使用通用分割能力，通過通用分割API文檔得知該能力屬于分割摳圖類目（imageseg20191230），能力名稱為SegmentCommonImage。此時，您需要將endpoint改為imageseg.cn-shanghai.aliyuncs.com，Action改為SegmentCommonImage，API_VERSION保持為2019-12-30不需要修改，request_["ImageURL"]參數名保持為ImageURL不需要修改。在獲取結果的時候，需要注意獲取的是ImageURL，其含義不是銀行卡號，而是分割后的圖片地址。

說明

在運行代碼之前，計算簽名需要引入CryptoJS的包，具體信息請參見CryptoJS包下載地址和CDN地址。有關計算簽名的具體邏輯，請參見請求簽名的相關內容。

/**
 * ========================================================================================================================
 * 以RecognizeBankCard為例。
 * 代碼中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替換為阿里云STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken
 * 請求銀行卡識別：http://bestwisewords.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(callback) {
  /**
    <ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替換為STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken
    需要為RAM用戶和RAM角色授予權限AliyunVIAPIFullAccess，請參考http://bestwisewords.com/document_detail/145025.html
   */
  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";


  // 這里endpoint為API訪問域名，與類目相關，具體類目的API訪問域名請參考：http://bestwisewords.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action，能力名稱，請參考具體算法文檔詳情頁中的Action參數，這里以銀行卡識別為例：http://bestwisewords.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_HTTP_METHOD推薦使用POST
  const API_HTTP_METHOD = "POST";
  // API_VERSION為API版本，與類目相關，具體類目的API版本請參考：http://bestwisewords.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const request_ = {};
  //系統參數
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = API_VERSION;
  request_["Action"] = Action;
  request_["SecurityToken"] = securityToken;

  // 業務參數，請參考具體的AI能力的API文檔進行修改
  request_["ImageURL"] = "http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/ocr/RecognizeBankCard/yhk3.jpg";
  
  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

步驟二：調用服務端接口并計算簽名

下面提供的代碼段是針對視覺智能開放平臺API的簽名和請求發送過程的實現。簽名是云服務常用的一種安全措施，用于確保發送到云服務的請求是未經篡改的，并且是由擁有相應憑證的合法用戶發起的。具體邏輯文檔請參見文檔請求簽名。

以下是該代碼段的具體含義和步驟：

簽名步驟：

  1. 生成隨機數字（Nonce）：函數signNRandom生成一個隨機數，這是為了使得每個請求都是唯一的，以防止重放攻擊。

  2. 獲取時間戳：函數getTimestamp生成符合ISO 8601標準的時間戳，表示請求發送的時間。

  3. 參數排序：函數ksort按照字典序排序所有請求參數。這是因為簽名算法要求參數必須以確定的順序進行排列。

  4. 計算簽名：函數createHmac和getSignature結合使用，用提供的Access Key Secret和以上生成的規范請求字符串，采用HMAC-SHA1算法計算出請求的簽名。

  5. 構建請求URL：函數generateUrl構建完整的請求URL，包括所有排序后的請求參數和計算得到的簽名。

發送請求步驟：

  1. 發送請求：函數callApiRequest使用上述構建的URL通過http.post函數發送一個HTTP POST請求。

  2. 處理響應：當服務器響應請求后，回調函數會被調用，并處理返回的結果，如將響應的JSON文本轉換成對象。

代碼示例（單擊查看詳情）

/**
 * ========================================================================================================================
 * 以下代碼僅僅為了調用服務端接口計算簽名，其邏輯可參考文檔：http://bestwisewords.com/document_detail/144904.html
 * ========================================================================================================================
 */

//SignatureNonce隨機數字
function signNRandom() {
  const Rand = Math.random()
  const mineId = Math.round(Rand * 100000000000000)
  return mineId;
};
//Timestamp
function getTimestamp() {
  let date = new Date();
  let YYYY = pad2(date.getUTCFullYear());
  let MM = pad2(date.getUTCMonth() + 1);
  let DD = pad2(date.getUTCDate());
  let HH = pad2(date.getUTCHours());
  let mm = pad2(date.getUTCMinutes());
  let ss = pad2(date.getUTCSeconds());
  return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
};
//補位占位
function pad2(num) {
  if (num < 10) {
    return '0' + num;
  }
  return '' + num;
};
// 排序
function ksort(params) {
  let keys = Object.keys(params).sort();
  let newParams = {};
  keys.forEach((key) => {
    newParams[key] = params[key];
  });
  return newParams;
};
// HmacSHA1加密+base64
function createHmac(stringToSign, key) {
  const CrypStringToSign = CryptoJS.HmacSHA1(stringToSign, key);
  const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
  return base64;
};
//編碼
function encode(str) {
  var result = encodeURIComponent(str);
  return result.replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {
  return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {
  var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
  const key = secret + "&";
  return sha1(stringToSign, key);
};
//參數拼接 &
function objToParam(param) {
  if (Object.prototype.toString.call(param) !== '[object Object]') {
    return '';
  }
  let queryParam = '';
  for (let key in param) {
    if (param.hasOwnProperty(key)) {
      let value = param[key];
      queryParam += toQueryPair(key, value);
    }
  }
  return queryParam;
};
function toQueryPair(key, value) {
  if (typeof value == 'undefined') {
    return `&${key}=`;
  }
  return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
  //參數中key排序
  const sortParams = ksort(request);
  //拼成參數
  const sortQueryStringTmp = objToParam(sortParams);
  const sortedQueryString = sortQueryStringTmp.substring(1);// 去除第一個多余的&符號
  //構造待簽名的字符串
  const Signature = getSignature(sortedQueryString, httpMethod, accessKeySecret)
  //簽名最后也要做特殊URL編碼
  request["Signature"] = encodeURIComponent(Signature);

  //最終生成出合法請求的URL
  const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signature) + sortQueryStringTmp;
  return finalUrl;
}

步驟三：封裝請求并發送數據至指定視覺智能開放平臺API

下面提供的代碼段是在Web前端環境中用于封裝HTTP請求和發送數據到指定API的示例實現。提供了在Web前端調用API的封裝方法，通過定義請求參數和設置回調方式來簡化異步HTTP請求的處理。它提供了基本的錯誤處理（如超時）和簡化了通過POST方法發送JSON數據的過程。

以下是該代碼段的具體含義和步驟：

  1. 構建HTTP庫：創建一個包含所有HTTP請求方法的http對象。

  2. 實現基本請求方法：通過http.request函數，使用XMLHttpRequest來實現對基本HTTP請求的支持。

  3. 封裝特定類型請求：提供http.post方法，簡化使用JSON格式發送POST請求的過程。

  4. 發起請求并處理結果：通過callApiRequest函數，展示如何使用封裝的HTTP庫發送請求并處理響應。

代碼示例（單擊查看詳情）

/**
 * ========================================================================================================================
 * 封裝http請求
 * ========================================================================================================================
 */
var http = {};
http.request = function (option, callback) {
  var url = option.url;
  var method = option.method;
  var data = option.data;
  var timeout = option.timeout || 0;
  //創建XMLhttpRequest對象
  var xhr = new XMLHttpRequest();
  (timeout > 0) && (xhr.timeout = timeout);
  //使用open方法設置和服務器的交互信息
  xhr.open(method, url, true);
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (e) { }
  }
  //發送請求
  xhr.send(data);
  //如果請求完成，并響應完成，獲取到響應數據
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var result = xhr.responseText;
      try { result = JSON.parse(xhr.responseText); } catch (e) { }
      callback && callback(null, result);
    }
  }.bind(this);
  //延時處理
  xhr.ontimeout = function () {
    callback && callback('timeout');
    console.log('error', '連接超時');
  };
};
// post請求
http.post = function (option, callback) {
  option.method = 'post';
  option.contentType = 'application/json;charset=UTF-8'
  this.request(option, callback);
};
//請求數據
callApiRequest = (request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) => {
  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
  http.post({ url: url, timeout: 5000 }, function (err, result) {
    // 獲取結果
    console.log(result);
    callback && callback(result);
  });
}

步驟四：頁面觸發按鈕并調用視覺智能開放平臺API

頁面觸發按鈕，調用API（銀行卡識別功能）。以下是該代碼段的具體含義和步驟：

  1. 用戶點擊按鈕：觸發callRecognizeBankCard函數。

  2. 執行銀行卡識別操作：通過callRecognizeBankCard函數向后端發送請求，進行銀行卡信息的識別。

  3. 處理識別結果：

    • 錯誤處理：根據錯誤碼（Code）顯示不同的錯誤信息。

    • 成功處理：在成功識別出銀行卡信息后，顯示銀行卡號（CardNumber）。

代碼示例（單擊查看詳情）

  <button onclick="callRecognizeBankCard(function(result) {
    if(result.Code) {
      // 進行錯誤處理
      if (result.Code == 'InvalidAccessKeyId.NotFound') {
          window.alert('請求報錯，請檢查您代碼中的YOUR_ACCESS_KEY_ID和YOUR_ACCESS_KEY_SECRET是否已經修改正確。');
      } else if(result.Code == 'InvalidApi.NotPurchase') {
          window.alert('請求報錯，您的賬號未開通視覺智能開放平臺相應類目，請進行開通：http://bestwisewords.com/document_detail/465341.html');
      } else if(result.Code == 'Unauthorized') {
          window.alert('請求報錯，您的子賬號未授予AliyunVIAPIFullAccess權限，請參考http://bestwisewords.com/document_detail/145025.html');
      } else if(result.Code == 'InvalidAction.NotFound') {
          window.alert('請求報錯，請檢查您調用的API和類目是否匹配，API和類目的關系請參考：http://bestwisewords.com/document_detail/465341.html，和訪問的域名是否匹配，類目和域名的關系請參考：http://bestwisewords.com/document_detail/143103.html');
      } else {
          window.alert(result.Message);
      }
    } else {
      console.log(result.Data);
      // 獲取銀行卡號，這里只是示例，請根據文檔獲取自己想要的出參
      window.alert('銀行卡號：' + result.Data.CardNumber);
    }
  })">開始調用</button>

方案二：若文件在本地或可訪問的URL

若您的文件存放在本地或可訪問的URL，請參見文件URL處理，顯式地將文件轉換成上海OSS鏈接，再按照若文件在上海地域OSS進行調用。本文以銀行卡識別（RecognizeBankCard）為例，僅展示關鍵步驟及關鍵代碼，完整的示例可下載WebDemo。如果您調用其他算法，請參見注釋和實際業務修改相應代碼。

交互流程

image

前提條件

獲取STS臨時憑證：

  1. 授予權限：

    在獲取STS臨時憑證之前，調用者（RAM用戶和RAM角色）需要被授權有調用STS接口的權限。您可以通過設置RAM權限策略來實現這一點。相關的設置步驟可參見使用STS臨時訪問憑證訪問OSS文檔。您需要根據實際需求配置更細粒度的授權策略，防止出現權限過大的風險。關于更細粒度的授權策略配置詳情，請參見視覺智能開放平臺自定義權限策略參考。

    重要

    為后續步驟進行，調用者（RAM用戶和RAM角色）需要被授權AliyunSTSAssumeRoleAccess（調用STS服務AssumeRole接口的權限）、RAM角色授予上傳OSS文件的權限、AliyunVIAPIFullAccess（這里為了下列實例，給出的是管理視覺智能API的權限，您需要根據實際需求配置更細粒度的授權策略，防止出現權限過大的風險。關于更細粒度的授權策略配置詳情，請參見視覺智能開放平臺自定義權限策略參考）

  2. 調用AssumeRole接口：

    使用已授權的RAM用戶或RAM角色調用AssumeRole接口，并按照接口文檔填寫必要參數。查閱AssumeRole接口的官方文檔以了解詳細的接口說明和使用方法。

  3. 使用STS Token：

    調用AssumeRole接口成功后，您會收到一個包含AccessKeyId、AccessKeySecret和SecurityToken的STS Token（如下代碼）。在實際調用其他阿里云服務的接口時，您需要將代碼中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替換為阿里云STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken。

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

步驟一：配置基本參數

下面提供的代碼段是調用阿里云的"銀行卡識別"服務，在WebDemo的js/script.js文件中。需要將代碼中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替換為阿里云STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken。

說明

此處的臨時的AccessKeyId、AccessKeySecret、SecurityToken是為了避免暴露自己的AccessKeyId和AccessKeySecret在前端界面上。下面（步驟二）獲取的STS Token臨時訪問權限是為了將上傳文件到臨時OSS bucket，從而得到RL地址。

/**
 * 如何獲取阿里云STS，請參考http://bestwisewords.com/zh/oss/developer-reference/use-temporary-access-credentials-provided-by-sts-to-access-oss
 * <ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替換為阿里云STS Token數據中獲取的臨時AccessKeyId、AccessKeySecret、SecurityToken
 * 需要為RAM用戶和RAM角色授予權限AliyunVIAPIFullAccess，請參考http://bestwisewords.com/document_detail/145025.html
 */

  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";

步驟二：調用GetOssStsToken接口獲取臨時OSS STS Token

下面提供的代碼段中getOssStsToken 函數用于獲取OSS（Object Storage Service，對象存儲服務）的STS（Security Token Service，安全令牌服務）令牌。它用于向阿里云請求臨時訪問權限以便上傳文件到OSS。上傳的文件會在OSS bucket中保存1天。通過指定的endpoint（API訪問域名），Action（請求執行的操作名稱），和API_VERSION（API版本）來構造請求，然后通過回調函數callback返回結果。callApi 函數用于調用阿里云平臺的任意API，支持通過簽名進行請求認證。函數接收endpoint（API訪問域名），action（API操作名稱），version（API版本），可選的業務參數params以及回調函數callback。函數中構造了一個符合要求的請求對象request_，包括系統參數（如簽名方法、時間戳、訪問密鑰ID等）和業務參數。signNRandom函數（未提供實現）生成一個唯一的隨機值（SignatureNonce）用于簽名防重放，getTimestamp函數（未提供實現）則提供當前時間戳。最后，該函數通過調用callApiRequest（未提供實現）函數實現實際的API調用并通過callback返回結果。

說明

更多關于本步驟的原理詳情，請參見文件URL處理。

代碼示例（單擊查看詳情）

/**
 * ========================================================================================================================
 * 獲取oss sts token，使用阿里云視覺智能開放平臺官方OSS-Bucket作為臨時存儲，僅為方便用戶方便調試接口使用，文件存儲有效期為1天。
 * ossStsToken獲取原理：請參見文檔http://bestwisewords.com/document_detail/155645.html，方式二中的其他語言
 * ========================================================================================================================
 */
function getOssStsToken(callback) {
  
  // 這里endpoint為API訪問域名，與類目相關，具體類目的API訪問域名請參考：http://bestwisewords.com/document_detail/143103.html
  const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
  // API Action，能力名稱，請參考具體算法文檔詳情頁中的Action參數，這里以銀行卡識別為例：http://bestwisewords.com/document_detail/151893.html
  const Action = "GetOssStsToken";
  // API_VERSION為API版本，與類目相關，具體類目的API版本請參考：http://bestwisewords.com/document_detail/464194.html
  const API_VERSION = "2020-04-01";

  callApi(endpoint, Action, API_VERSION, null, callback);
}

/**
 * ========================================================================================================================
 * 通過簽名方式調用API，支持平臺的任意API。
 * 簽名文檔：http://bestwisewords.com/document_detail/144904.html
 * ========================================================================================================================
 */
function callApi(endpoint, action, version, params, callback) {

  const API_HTTP_METHOD = "POST";

  const request_ = {};
  //系統參數
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = version;
  request_["Action"] = action;
  request_["SecurityToken"] = securityToken;
  // 業務參數，請參考具體的AI能力的API文檔進行修改
  if(params) {
    for(let key in params) {
      request_[key] = params[key];
    }
  }

  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

步驟三：使用臨時OSS STS Token將文件上傳到阿里云視覺智能開放平臺官方OSS Bucket

下面提供的代碼段是將文件或URL資源上傳到阿里云Object Storage Service（OSS）的JavaScript實現，尤其是上傳到視覺智能開放平臺官方的臨時存儲Bucket中。上傳的文件有效期為1天，這便于用戶進行接口調試。

以下是該代碼段的具體含義和步驟：

  1. 初始化OSS客戶端：使用STS令牌初始化OSS客戶端，并指定OSS的區域和Bucket。

  2. 生成文件路徑：使用getNonce函數生成一個隨機字符串作為文件名的一部分，確保上傳路徑的唯一性。

  3. 上傳文件：使用OSS客戶端的put方法，將本地文件或從URL轉換得到的File對象上傳到OSS。

    說明

    • OSS Bucket上傳文件的路徑是accessKeyId/getNonce(6)/fileName。

    • 文件路徑中的accessKeyId是步驟一：配置基本參數中獲取的<ALIBABA_CLOUD_ACCESS_KEY_ID>。

  4. 處理響應：在上傳完成后，通過回調函數返回上傳結果。這通常包括新上傳的文件URL，如果上傳過程中出現異常，則打印錯誤信息。

說明

本步驟需要引入oss-client-sdk，更多信息，請參見Browser.js。

代碼示例（單擊查看詳情）

/**
 * ========================================================================================================================
 * 處理文件和URL，將其上傳到阿里云視覺智能開放平臺官方OSS-Bucket作為臨時存儲，該方式僅為方便用戶方便調試接口使用，文件存儲有效期為1天。
 * ========================================================================================================================
 */
// 使用oss-client-sdk進行文件上傳
function uploadToTempOss(ossStsToken, filePath, callback) {
  let ossClient = new OSS({
    accessKeyId: ossStsToken.Data.AccessKeyId,
    accessKeySecret: ossStsToken.Data.AccessKeySecret,
    stsToken: ossStsToken.Data.SecurityToken,
    // region固定為oss-cn-shanghai
    region: "oss-cn-shanghai",
    // bucket固定為viapi-customer-temp
    bucket: 'viapi-customer-temp',
  });
  let ins = filePath;
  let fileName = filePath.name;
  // 上傳之后的文件路徑，必須是${accessKeyId}/xxx，accessKeyId是步驟一中獲取的<ALIBABA_CLOUD_ACCESS_KEY_ID>
  let objectName = `${accessKeyId}/${getNonce(6)}/${fileName}`;
  putObject(ins);
  async function putObject(data) {
    try {
      // 填寫Object完整路徑。Object完整路徑中不能包含Bucket名稱。
      // 您可以通過自定義文件名（例如exampleobject.txt）或文件完整路徑（例如exampledir/exampleobject.txt）的形式實現將數據上傳到當前Bucket或Bucket中的指定目錄。
      // data對象可以自定義為file對象、Blob數據或者OSS Buffer。
      const result = await ossClient.put(
        objectName,
        data
      );
      console.log('result', result);
      callback && callback(result.url);
    } catch (e) {
      console.log(e);
    }
  }
}
//隨機uuid，ossClient上傳后的文件命名拼接
function getNonce(length) {
  var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var result = '';
  for (var i = length; i > 0; --i)
    result += str[Math.floor(Math.random() * str.length)];
  return result;
}
// 任意鏈接轉化為File，鏈接必須支持跨域，為了將鏈接內容傳到阿里云視覺智能開放平臺官方OSS-Bucket
function getImageFileFromUrl(url, imageName) {
  return new Promise((resolve, reject) => {
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      blob = xhr.response;
      let imgFile = new File([blob], imageName);
      resolve(imgFile);
    };
    xhr.onerror = (e) => {
      reject(e)
    };
    xhr.send();
  });
}

步驟四：上傳之后得到OSS的URL地址，調用視覺智能開放平臺API

下面提供的代碼段是用上傳之后得到OSS的URL地址，調用視覺智能開放平臺API。具體的操作步驟與若文件在上海地域OSS進行調用一致。且每一步代碼都已封裝好，完整的示例代碼可下載WebDemo。

  1. 準備API調用的參數：

    • Endpoint：API的訪問域名，這里為ocr.cn-shanghai.aliyuncs.com。

    • Action：API操作名稱，這里為RecognizeBankCard，表示調用的是銀行卡識別服務。

    • API Version：API版本，這里為2019-12-30。

    • 特別注意要授予權限給RAM用戶或角色，以確保有權限調用視覺智能開放平臺的API。請參見前提條件中的授予權限。

  2. 構造請求參數對象：

    request_對象包含了API調用所需的系統參數（如簽名方法、時間戳、格式等）和業務參數（這里是待識別的銀行卡圖片URLImageURL）。

  3. 發起API請求：

    通過調用封裝好的callApi函數，將準備好的請求參數、API endpoint、以及一個回調函數傳遞進去。回調函數用于處理API響應。

在WebDemo的js/script.js文件中，callRecognizeBankCard函數的endpoint、Action、API_VERSION參數及request_["ImageURL"]這一行代表業務參數。舉例來說，如果您希望使用通用分割能力，通過通用分割API文檔得知該能力屬于分割摳圖類目（imageseg20191230），能力名稱為SegmentCommonImage。此時，您需要將endpoint改為imageseg.cn-shanghai.aliyuncs.com，Action改為SegmentCommonImage，API_VERSION保持為2019-12-30不需要修改，request_["ImageURL"]參數名保持為ImageURL不需要修改。在獲取結果的時候，需要注意獲取的是ImageURL，其含義不是銀行卡號，而是分割后的圖片地址。

/**
 * ========================================================================================================================
 * 以RecognizeBankCard為例。
 * 請求銀行卡識別：http://bestwisewords.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(imageUrl, callback) {
  // 這里endpoint為API訪問域名，與類目相關，具體類目的API訪問域名請參考：http://bestwisewords.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action，能力名稱，請參考具體算法文檔詳情頁中的Action參數，這里以銀行卡識別為例：http://bestwisewords.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_VERSION為API版本，與類目相關，具體類目的API版本請參考：http://bestwisewords.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const params = {};
  // 業務參數，請參考具體的AI能力的API文檔進行修改
  params["ImageURL"] = imageUrl;

  callApi(endpoint, Action, API_VERSION, params, callback);
}