I am developing the linebot to receive picture with QR-code. As you can see on below code I have already success to save file in to local folder as 'logo.png' in stream.on('end' , ...)
Then I want to use that recently save file to detect QR-code by this npm library. (https://www.npmjs.com/package/jsqr)
Then I have create function readPic() to pass imgPath and use that picture to detect QR-code.
My problem is that const image = new Image(); have an error called 'Image is not defined'
How can I fix this? or if there is an alternative ways to get imageData from picture to be used in jsQR() without using canvas.
My code:
import { useState } from 'react';
import fs from 'fs'
import axios from 'axios';
import jsQR from 'jsqr'
const request = require('request')
require('dotenv').config()
// const redis = require('redis')
// const client = redis.createClient();
// client.on("error", function(error) {s
// console.error(error);
// });
// client.set("key", "value", redis.print);
// client.get("key", redis.print);
let count = 0
const cal_state = []
let calState = false
//
const line = require('@line/bot-sdk');
export default function test(req, res) {
// handle LINE BOT webhook verification
// The verification message does not contain any event, so length is zero.
if (req.body.events.length === 0) {
res.status(200).json({})
// console.log("hello")
reply("Hello") // can reply anything
return
}
let event = req.body.events[0];
let reply_token = event.replyToken
let arr = []
let path = './public/img/logo.png'
let id = event.source.userId
if (event.message.type !== 'text') {
const client = new line.Client({
channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});
client.getMessageContent(event.message.id)
.then((stream) => {
stream.on('data', (chunk) => {
console.log(chunk)
arr.push(chunk)
});
stream.on('error', (err) => {
console.log("Error", err)
});
stream.on('end', function () {
//fs.writeFile('logo.png', imagedata, 'binary', function(err){
var buffer = Buffer.concat(arr)
fs.writeFile(path, buffer, function (err) {
if (err) throw err
console.log('File saved.')
})
})
stream.on('end', function() {
readPic()
})
});
reply(reply_token, event.message.type)
} else {
postToDialogflow(req)
}
}
function readPic() {
const image = new Image();
image.src = './public/img/QR-Code.png'
if (image.width > image.height) {
setWidth(600)
setHeight(400)
} else if (image.width < image.height) {
setWidth(450)
setHeight(600)
}
// const canvas = document.getElementById("canvas"); //Able to show picture on webpage
const canvas = document.createElement('canvas'); //Do not show picture on page
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d');
let imageDataT = new Uint8ClampedArray()
image.onload = () => {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// console.log('width:', image.width)
// console.log('height:', image.height)
imageDataT = ctx.getImageData(0, 0, image.width, image.height);
console.log(imageDataT);
const code = jsQR(imageDataT.data, image.width, image.height, 'dontInvert')
if (code) {
setQRdata(code.data)
console.log("Found QR code", code);
console.log("Result", code.data);
} else {
console.log("Do not detect QR-code.")
}
}
}
function reply(reply_token, msg) {
let headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer {' + process.env.CHANNEL_ACCESS_TOKEN + '}'
}
// console.log('msg:', msg)
let body = JSON.stringify({
replyToken: reply_token,
messages: [{
type: 'text',
text: msg
}]
})
console.log("reply =============> ", body)
request.post({
url: 'https://api.line.me/v2/bot/message/reply',
headers: headers,
body: body
}, (err, res, body) => {
// console.log('status = ' + res.statusCode);
// console.log("body ====> ", res.body)
});
}
const postToDialogflow = req => {
req.headers.host = "dialogflow.cloud.google.com"
axios({
url: "https://dialogflow.cloud.google.com/v1/integrations/line/webhook/e8cc963c-2816-4340-892f-f424247eb2f5",
headers: req.headers,
method: "post",
data: req.body
})
}
Error:
