Microsoft Azure Congnitive ServiceのFace 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){varapiUrl='https://\*\*\*\*.cognitiveservices.azure.com/face/v1.0/detect';//エンドポイントの末尾に「/detect」を足したものvarapiKey='\*\*\*\*';//Key1variconSize=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) {varreader=newFileReader();reader.addEventListener('load',function(){JSON.parse(response[0]).forEach(function(face){varcanvas=document.createElement('canvas');canvas.classList.add('face-icon');varimg=newImage();varlongLength=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){varkintoneConnection=newkintoneJSSDK.Connection();varkintoneFile=newkintoneJSSDK.File(kintoneConnection);varkintoneRecord=newkintoneJSSDK.Record(kintoneConnection);returnkintone.Promise.all(
[].map.call(document.getElementsByClassName('face-icon'),function(canvas,index){returnnewkintone.Promise(function(resolve){canvas.toBlob(function(blob){resolve(blob);
},'image/jpg');
}).then(function(blob){returnkintoneFile.upload({
fileBlob:blob,
fileName:index+'.jpg'});
});
})
).then(function(responses){returnkintoneRecord.updateRecordByID({
app:kintone.app.getId(),
id:event.recordId,
record:{
icons:{
value:event.record.icons.value.concat(responses)
}
}
});
}).then(function(){returnevent;
})
});
})();