新規投稿
フォローする

Microsoft AzureのFace APIを使って顔アイコン自動生成

Microsoft Azure Congnitive ServiceFace APIを使うと、画像内の顔認識ができます。 画像内の顔を切り出して、アイコンを作成するサンプルを紹介します。

サンプル

添付ファイルフィールドで画像選択時に、顔を切り抜いてスペースフィールドに表示します。 レコードの保存成功時に、切り抜いた顔アイコン画像を追加登録します。

Azure設定

Azureのポータルから「リソースの作成 > AI + Machine Learning > Face」を選択し、必要項目を入力してリソースを作成します。 作成後、「リソースの管理 > クイック スタート」のページの「Key1」と「エンドポイント」の値をメモしておきます。

kintone設定

フォーム設定

コード

サンプルではkintone JS SDKを利用しています。 「kintone-js-sdk.min.js」を読み込み後、下記「sample.js」を読み込みます。 「apiUrl」と「apiKey」には、Azure設定でメモした値を用います。

・sample.js

(function() {
  "use strict";
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show'
  ], function(event){
    var apiUrl = 'https://****.cognitiveservices.azure.com/face/v1.0/detect'; //エンドポイントの末尾に「/detect」を足したもの
    var apiKey = '****'; //Key1
    var iconSize = 150; //アイコンの大きさ(px)

    document.addEventListener('change', function(event){
      if(event.target.type !== 'file') return;
      [].forEach.call(event.target.files, function(file){
        if(!file.type.match('image.*')) return;
        kintone.proxy.upload(
          apiUrl, 'POST', {
            'Content-Type': 'application/octet-stream',
            'Ocp-Apim-Subscription-Key': apiKey
          }, {
            format: 'RAW',
            value: file
          }
        ).then(function (response) {
          var reader = new FileReader();
          reader.addEventListener('load', function(){
            JSON.parse(response[0]).forEach(function(face){
              var canvas = document.createElement('canvas');
              canvas.classList.add('face-icon');
              var img = new Image();
              var longLength = Math.max(face.faceRectangle.width, face.faceRectangle.height)
              img.src = reader.result;
              canvas.width = iconSize;
              canvas.height = iconSize;
              img.addEventListener('load', function(){
                canvas.getContext('2d').drawImage(
                  img,
                  face.faceRectangle.left + (face.faceRectangle.width - longLength) / 2,
                  face.faceRectangle.top + (face.faceRectangle.height - longLength) / 2,
                  longLength,
                  longLength,
                  0,
                  0,
                  iconSize,
                  iconSize
                );
                kintone.app.record.getSpaceElement('icons-space').appendChild(canvas);
              });
            });
          });
          reader.readAsDataURL(file);
        });
      });
    }, true);
  });
  kintone.events.on([
    'app.record.create.submit.success',
    'app.record.edit.submit.success',
  ], function(event){
    var kintoneConnection = new kintoneJSSDK.Connection();
    var kintoneFile = new kintoneJSSDK.File(kintoneConnection);
    var kintoneRecord = new kintoneJSSDK.Record(kintoneConnection);
    return kintone.Promise.all(
      [].map.call(document.getElementsByClassName('face-icon'), function(canvas, index){
        return new kintone.Promise(function(resolve){
          canvas.toBlob(function(blob){
            resolve(blob);
          }, 'image/jpg');
        }).then(function(blob){
          return kintoneFile.upload({
            fileBlob: blob,
            fileName: index+'.jpg'
          });
        });
      })
    ).then(function(responses){
      return kintoneRecord.updateRecordByID({
        app: kintone.app.getId(),
        id: event.recordId,
        record: {
          icons: {
            value: event.record.icons.value.concat(responses)
          }
        }
      });
    }).then(function(){
      return event;
    })
  });
})();
2

0件のコメント

サインインしてコメントを残してください。