### 前提・実現したいことブラウザにAzure Blob Storage上にある画像（png）を表示させたいです。（これはAzure SignalRを使ったリアルタイム画像表示を見据えた、その前段階の試作です。）画像を表示させるときは、ブラウザからAzure Functions上のHTTPトリガーを起動し、そこで画像データを取得・Base64エンコードしてブラウザへ返却するようにしています。FunctionsのInput項目（Functionsの引数）としてBlob Storageを設定しているので、そこから画像データを取得することを考えています。ブラウザでは、

としてBase64エンコードしたものが表示されるようにしています。 ### 発生している問題・エラーメッセージ問題は、Functionsの引数から画像データを取得し、Base64エンコードできていないことです。どうすればよいのか躓いている状態です。気になっていることの１つは、Functionsに設定しているBlob Storageの引数の型が文字列（string）であることです（Functionsをjavascriptで記述している場合。）。画像データなのでバイナリ（もしくはAzureのチュートリアルから考えてストリーム型）を想定していました。 ### 該当のソースコード Functionsのindex.js ```javascript module.exports = async function (context, req, myInputBlob) { context.log( 'type:' + typeof myInputBlob ); // "type:string" と出力される。 const responseMessage = Buffer.from( myInputBlob, 'utf-8' ).toString('base64'); // Base64エンコードできない。期待：iVBORw0KGg..... context.res = { // status: 200, /* Defaults to 200 */ body: responseMessage }; } ``` Functionsのfunction.json ```json { "bindings": [ { "authLevel": "anonymous", "type": "httpTrigger", "direction": "in", "name": "req", "methods": [ "get", "post" ] }, { "type": "http", "direction": "out", "name": "res" }, { "name": "myInputBlob", "type": "blob", "path": "my-file-system/test_file.png", "connection": "AzureWebJobsStorage", "direction": "in" } ] } ``` クライアント（Vue.js）HTML Body部のみ index.html ```html

Image

``` クライアント（Vue.js） index.html.js ```javascript const LOCAL_BASE_URL = 'http://localhost:7071'; const REMOTE_BASE_URL = ''; // 変更不要 const IMAGE_BASE64 = 'data:image/png;base64,'; const getAPIBaseUrl = () => { const isLocal = /localhost/.test(window.location.href); return isLocal ? LOCAL_BASE_URL : REMOTE_BASE_URL; } const app = new Vue({ el: '#app', data() { return { stocks: [], responseMessages: IMAGE_BASE64 } }, methods: { async getStocks() { try { const apiUrl = `${getAPIBaseUrl()}/api/getImageBase64`; const response = await axios.get(apiUrl); app.responseMessages = IMAGE_BASE64 + response.data; // console.log( `message:${response.data}` ); } catch (ex) { console.error(ex); } } }, created() { this.getStocks(); } }); ``` bs-config.json ```javascript { "port": 8080, "files": ["./public/**/*.{html,htm,css,js}"], "server": { "baseDir": "./public" } } ``` package.json ```javascript { "name": "testgetimagebyfunctions", "version": "1.0.0", "description": "", "scripts": { "start": "lite-server --baseDir=\"public\"", "test": "echo \"No tests yet...\"" }, "dependencies": {}, "devDependencies": { "lite-server": "^2.5.3" } } ``` local.settings.json ```json { "IsEncrypted": false, "Values": { "AzureWebJobsStorage": "xxx", "FUNCTIONS_WORKER_RUNTIME": "node" }, "Host" : { "LocalHttpPort": 7071, "CORS": "http://localhost:8080", "CORSCredentials": true } } ``` AzureWebJobsStorageは各自で接続文字列を設定ください。 ### 試したこと - Functionsの引数に設定されている変数（myInputBlob）を使わずに、接続文字列など必要な処理を記述してBlob Storageにアクセスし、Base64エンコードした結果を返すと、ブラウザに画像表示できました。 - 変数のmyInputBlobの型がstringであったので、そのままデバッグ出力してみると、”?PNG...”のように出力（文字化けあり）されるため、画像データは取得できている？。 - FunctionsをjavascriptからPythonに変更して試しても、同じようにブラウザに画像表示できなかった。ただ、myInputBlobの型はstringではなく、azure.functions.InputStream型でした。 ### 補足情報（FW/ツールのバージョンなど）ローカル環境 - Windows10 Pro - Node.js v12.18.1 - Visual Studio Code 1.47.2 - Azure Functions 2.7.2628 クラウド - Azure ストレージアカウント StorageV2 (汎用 v2)