node.jsで保存した画像が開けなくなることについて

Question

現在、linebotに送信された画像をnode.jsでoutフォルダに保存するというプログラムを組み立てています。
以下のコードを用いるとoutフォルダにはtest.jpgというデータで保存することができました。
しかし、test.jpgをwindowsフォトビューアで開いてみると「ファイルが破損しているか、大きすぎる可能性があります。」とエラーが表示されます。

https://qiita.com/nbapps_dev/items/d9c689a61cc5dd8440ee
https://qiita.com/PianoScoreJP/items/8b477a2bb09dd1db7826

いくつかのサイトを参考にしてエンコーディングを変えたりしてみましたが、やはり開くことができないファイルのままでした。

ちなみに作成されたtest.jpgは、ディスク上のサイズが0バイトであり、ファイルが破損している可能性が考えられます。
アドバイスよろしくお願いします。

以下のコードでは、★部分が問題となるfs.writefile()となっています。

'use strict';
const fs = require('fs');
const bodyParser = require('body-parser');
const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;
const config = {
    channelSecret: '適切なものを記入',
    channelAccessToken: '適切なものを記入'
};
const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result)); 
});

const client = new line.Client(config);

function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
	return ★fs.writeFile("./out/test.jpg",event.message.image,"binary",(error)=>{
		if(error){
			console.log("error");
		}
	});
  }
  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text //実際に返信の言葉を入れる箇所
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

（追記）

getMessageContentを使用して以下のように★付近のコードを変更しました。

if (event.message.type == "image"){

  return client.getMessageContent(event.message.id).then((stream) => {
	stream.on('data', (chunk) => {
        //console.log(chunk);
	fs.writeFile("./out/test.jpg",chunk,"binary",(error)=>{
	    if(error){
		console.log("error");
	    }
	})
  })
})

Answer 1

event.message.type === "image"の場合（画像を受け取った場合）、
画像ファイルはevent.message.imageに直接画像が入ってくるわけではありません。
そのため、0バイトの画像が作成されているのかと思います。
https://developers.line.biz/ja/reference/messaging-api/#wh-image

LINEのトーク画面から普通に画像ファイルを送った場合は、コンテンツ取得APIを使用して画像本体を取得します。
https://developers.line.biz/ja/reference/messaging-api/#get-content

nodeのSDKを使用している場合は、
https://line.github.io/line-bot-sdk-nodejs/api-reference/client.html#methods
client.getMessageContent()に、event.message.idを指定することでreadable streamが取得できますので、それを元に画像の書き込みを行うと良いでしょう。

追記

getMessageContent() のマニュアルにもある通り、

Please beware that what it returns is promise of readable stream. You can pipe the stream into a file, an HTTP response, etc.

getMessageContent()のcallbackで返ってくるのはreadable streamです

ある程度の大きさの画像の場合、stream.on('data')は、chunkに分けられて複数回呼び出されます。

stream.on('data', (chunk) => {
  console.log(`Received ${chunk.length} bytes of data.`);
});

のようにして見れば、何度も呼び出されているのがわかると思います。

コードを変えても0バイトの画像が出力されます。

何度も呼び出されますので、最後に呼び出されたものしか書き込まれていないのでしょう。
（なので、正確には0バイトではなく数バイトにはなってると思いますが壊れた画像になっているはずです。）

Node.js Stream を使いこなす - Qiita

こちらを参考に、fs.writeFile()を使うのではなく、fs.createWriteStream()で作成したWriteable Streamにpipeしてやれば動作するはずです。

const dest = fs.createWriteStream('./out/test.jpg', 'binary');
client.getMessageContent(event.message.id).then(stream => {
    stream.pipe(dest);
})

Comments

[akihir]

とても参考になるご回答どうもありがとうございます。
ただコードを変えても0バイトの画像が出力されます。
変更したコードは質問に追記しておきます。お手数ですがコメントよろしくお願いします。