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

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接口成功后,您會收到一個包含AccessKeyIdAccessKeySecretSecurityToken的STS Token(如下代碼)。在實際調用其他阿里云服務的接口時,您需要將代碼中的<ALIBABA_CLOUD_ACCESS_KEY_ID><ALIBABA_CLOUD_ACCESS_KEY_SECRET><ALIBABA_CLOUD_SECURITY_TOKEN>替換為阿里云STS Token數據中獲取的臨時AccessKeyIdAccessKeySecretSecurityToken

{
  "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.comAction改為SegmentCommonImageAPI_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://m.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://m.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://m.bestwisewords.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action,能力名稱,請參考具體算法文檔詳情頁中的Action參數,這里以銀行卡識別為例:http://m.bestwisewords.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_HTTP_METHOD推薦使用POST
  const API_HTTP_METHOD = "POST";
  // API_VERSION為API版本,與類目相關,具體類目的API版本請參考:http://m.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. 計算簽名:函數createHmacgetSignature結合使用,用提供的Access Key Secret和以上生成的規范請求字符串,采用HMAC-SHA1算法計算出請求的簽名。

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

發送請求步驟:

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

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

代碼示例(單擊查看詳情)

/**
 * ========================================================================================================================
 * 以下代碼僅僅為了調用服務端接口計算簽名,其邏輯可參考文檔:http://m.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://m.bestwisewords.com/document_detail/465341.html');
      } else if(result.Code == 'Unauthorized') {
          window.alert('請求報錯,您的子賬號未授予AliyunVIAPIFullAccess權限,請參考http://m.bestwisewords.com/document_detail/145025.html');
      } else if(result.Code == 'InvalidAction.NotFound') {
          window.alert('請求報錯,請檢查您調用的API和類目是否匹配,API和類目的關系請參考:http://m.bestwisewords.com/document_detail/465341.html,和訪問的域名是否匹配,類目和域名的關系請參考:http://m.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://m.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://m.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://m.bestwisewords.com/document_detail/155645.html,方式二中的其他語言
 * ========================================================================================================================
 */
function getOssStsToken(callback) {
  
  // 這里endpoint為API訪問域名,與類目相關,具體類目的API訪問域名請參考:http://m.bestwisewords.com/document_detail/143103.html
  const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
  // API Action,能力名稱,請參考具體算法文檔詳情頁中的Action參數,這里以銀行卡識別為例:http://m.bestwisewords.com/document_detail/151893.html
  const Action = "GetOssStsToken";
  // API_VERSION為API版本,與類目相關,具體類目的API版本請參考:http://m.bestwisewords.com/document_detail/464194.html
  const API_VERSION = "2020-04-01";

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

/**
 * ========================================================================================================================
 * 通過簽名方式調用API,支持平臺的任意API。
 * 簽名文檔:http://m.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.comAction改為SegmentCommonImageAPI_VERSION保持為2019-12-30不需要修改,request_["ImageURL"]參數名保持為ImageURL不需要修改。在獲取結果的時候,需要注意獲取的是ImageURL,其含義不是銀行卡號,而是分割后的圖片地址。

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