Блог

Я разрабатываю ЛИНЕЙНОГО бота, который будет использоваться для получения данных и изображений для сохранения в базе данных и последующего использования на веб-сайте.

Картинка, которую в основном получит мой бот, будет купоном с QR-кодом. Итак, вот результат, который я получил, когда получил изображение из СТРОКИ в виде двоичных данных изображения.

Результат:

и это мой код, когда я извлекаю свою фотографию из сообщения строки и определяю тип сообщения. От api/line.js

 import axios from 'axios';
const request = require('request')
require('dotenv').config()

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 id = event.source.userId


    if (event.message.type !== 'text') {

        let arr = []

        const client = new line.Client({
            channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
        });
    
        client.getMessageContent(event.message.id)
            .then((stream) => {
                stream.on('data', (chunk,p) => {
                    arr.push(chunk)
                    console.log(chunk)
                });
                stream.on('error', (err) => {
                    console.log("Error", err)
                });
            });

        reply(reply_token, event.message.type)
        console.log("arr: ",arr)


    } else {
        postToDialogflow(req)
    }
}

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)
    });
}

 

Я могу нормально console.log(chuck) . Но, когда я пытаюсь сохранить его в какой-то переменной. Например, в массивах. В нем говорится, что chuck это не определено.

Ошибка:

Кроме того, есть ли способ преобразовать двоичные данные изображения в объект Uint8ClampedArray. Поскольку библиотека npm, которую я использую для декодирования QR-кода с картинки, — это именно она. https://www.npmjs.com/package/jsqr

И для этого требуется передать данные изображения как объект Uint8ClampedArray.

Это мой код, когда я обрабатываю QR-код с картинки (на данный момент он получается image.src из статического изображения в папке). И приведенный ниже код находится в отдельном файле. Я планирую поместить этот код в api/line.js

QR-код считывателя(от index.js):

 import Head from 'next/head'
import styles from '../styles/Home.module.css'
import jsQR from 'jsqr'
import { useEffect, useState } from 'react'

export default function Home() {

  const [qrData, setQRdata] = useState('')

  useEffect(() => {
    
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext('2d');

    const image = new Image;
    let imageDataT = new Uint8ClampedArray()
    image.src = './img/Coupon_with_Hash.png'
    image.onload = () => {
      ctx.drawImage(image, 0, 0, canvas.width, canvas.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 code.")
      }
    }
  })

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Detect QR-Code from Picture
        </h1>

        <p className={styles.description}>
          Static Image show from folder 'public'.
        </p>

        <canvas id="canvas"></canvas>

        <p>Result: {qrData}</p>
      </main>

      <footer className={styles.footer}>
        
      </footer>
    </div>
  )
}
 

Как сохранить результат из строки и преобразовать двоичные данные изображения в объект Uint8ClampedArray?