為什么upng-js回傳的imagedata格式不正確？

我正在使用該upng-js模塊讀取 png 檔案。在常識中，回傳值應該是 RGBA 形式，所以應該是Unit8Array大小為 4* width* 的height。但是，當我讀取大小為 111*111 的影像時，它回傳Unit8Array大小為 49395 的影像。這是我的代碼：

const jsQR = require('jsqr');
const upng = require('upng-js');
const fs = require('fs');

const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAABvCAYAAADixZ5gAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAYHSURBVHhe7d3Rlhs3DAPQ v8/usnJzIN9PPJehNLa2rDPioYCCBCSm/b2/ 9//ut/tkTg1uRtydufopu8fblr8jbmrslr8nZGYOPahzPvdrtNP9Yo2Mq3VoTi  /K/qM67/ snCUFdojbKG1 axHQKAJuCkqTFyDWygvAultaUl6l69PuHh1P9pE1lf0F koN9/vLPjTzmjyh7VgjoMtusk TdyIpYM0CfdY MXkSZEbpS1KZzEXZ5x4gWS81i62NmmAWbg81SNqUwwtYsk T5/bbyju7rpUXALFixsxS/2gmSXD752xTQJGI3 R9kb5mDd5W3nM7xta9Y2CpKKwSmioRf1bTb582m7wzkbbyXtuXqC29/0kgkrESXxVWHEbudqK20RqpWVKizCQBvVJPyTblw2knNnnPqEoTtPKCdL2l8lK1VTx9tX195/4rcIttc0UR3wliRTGVOlfg1uSdCKwm9W3kzfrwaJ9Zl1YZ7OlZVuyZ1iDr3/ZvTDd5Qs/rNU3eBT7bK08Gddo76a8HAmKq4LRmqWF0r02/FeOz4nlMrgpyMAGuyQusQ8Bq8qQ1n9csUd7flXL8KXn6kp9p7muQQ1ZUO6tm2UewHe4jtikfSNVWmalN3oE2vW02eSdYd3 nQtziI5QnnV65jIslrrDBNCUKGemaUYYQzEl5slGTN3fGC ZN3tl1kqJTVY2UXbHchz0lsEjRElhmWZ EnUrN6VlWrJecUVJe2q1N3mtKxCpbedLWF2vE7kbhK210KTF mJZ0JGsk6cnvbbOCkiRe ZbULLYv9TR5XyiMFAD3v5TUJk Q/4nkiUdLyhJ7lH3EimfVLN Sa4D0jtT8rW bs2K6BARZIyDKPnKuODEW/jMmdFWQw5NHQ6FpWhPQpX7ZZxvyxO7kwClwsl7ui7OSYaWeNFWKAOie1 QJbccaISltdLFfuirIAJfBK8FEIGvlnU2Tvm0KkUKArElJkvWiEqlNlCHWnVol2WZ6yMph5JCyf5N3ItnkvdafNJM05XLlpfFdbCctenUzyf7pVaEyYshFZOY1eQcCTd6FLMWCRBmpmkfXIXlETv9sWts05aUdJ16f7imHEUBljTRK5d4mdirnpeexFOgm7xkBITtWvMy8Ju 8FMPvdqPGfRt5UtDIjuTPikWk 8t301QsNaSNLhY6dDJRXgqEPJWlFiHACRkSjmSfFHSZo3GoafKEquc125Anfi3qTLtPOnEWiKmyU cQN5LzPtQpymvyPD3KzBOti73HV4VKB7XyhLZjTYm8WXe1kRVIE4g1iW1KmpV6UlsTKxalDteMbLPJe60SUUaTdyKQWq6oVsCVICZmKA4xqidWXmo1szoxBUvqFJKk/rSB0pERN1yaNtPuEPuVzq3MhibvAuG06wXEVt6BgGBbuipU7n9CkiRAsRoCAh6dV3xLcBi6V2qbFd9P7bHJe41YKy9Isz9KeZKmJGikipTZKemxEqZkf3GOt9lmk/eFrYV/sWaE55KZ1 RtTF46AyoWUbE4aTJZszpdp3foJYElPaTMjybvGYEm76IrZjnKrCAWv23Khytr5L4oSXW1amfVkJ6XHhbSn4QqhImnU9GD15C0NonyTd4FqmknCvFN3sWLQwpKmipnqW1FQ6TqTGtIf d7aGJ522zyXiOQBhxJ4zLLKW02eRuTJ10g9zDpuLRR0kAhNijPVGL1MqfTfWLbbPIuLshh4k1noTQx2WaT90PIE9upDHCxmtEa6VZZk9Yvey5J4JI201mVHj6dW03egUBsm628E7jCb3WzAtFHkDfLUtLklq7/uET9CbbZ5Pk9snRVWGGbTd7G5EnAEctKU58EpXQ SSNOs tPsM0mL227D02baVeKjYsa5PqRKnWk2vSMQ9dJlZf2iBQqT0cV xJlp00gr04r9iwFlibvQKDJOzuhlecNESsvVZvMmMovyGk90hwrlCR1iqWXZp4UIWvkjVRAlG NAkgJrElPYrOCDD2PpWC18hyxUjON0qZ/vle CwH6/yq8q7j 7msEmryNO6TJa/I2RmDj0lt5G5P3C5einFk/dclYAAAAAElFTkSuQmCC';

const regex = /^data:. \/(. );base64,(.*)$/;
const matchObj = dataUrl.match(regex);
const ext = matchObj[1];
const data = matchObj[2];

const buf = Buffer.from(data, 'base64');
// console.log(buf);

fs.writeFileSync('test.' ext, buf);

const imgInfo = upng.decode(buf);
console.log(imgInfo);

const url = jsQR(imgInfo.data, imgInfo.width, imgInfo.height);
console.log(url);

列印的影像資訊如下：

{
  tabs: { sRGB: 0 },
  frames: [],
  width: 111,
  height: 111,
  depth: 8,
  ctype: 6,
  data: Uint8Array(49395) [
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
    255, 255, 255, 255,
    ... 49295 more items
  ]
}

影像在磁盤上通過writeFileSync功能很好地恢復。拋出的錯誤jsQR：

/home/vector/node_modules/jsqr/dist/jsQR.js:412
        throw new Error("Malformed data passed to binarizer.");

uj5u.com熱心網友回復：

首先，讓我們將您的影像轉換為RGBA8格式，然后創建一個Uint8ClampedArray- Input of jsQR.

// ...
const rgba8 = upng.toRGBA8(imgInfo)[0]; // convert to RGBA8
const qrArray = new Uint8ClampedArray(rgba8); // create Uint8ClampedArray array

const code = jsQR(qrArray, imgInfo.width, imgInfo.height);
console.log(code);

您的 QR 碼的輸出將如下所示（在我的筆記本電腦上）：

{
  binaryData: [
    104, 116, 116, 112,  58,  47,  47, 116, 120, 122,  46,
    113, 113,  46,  99, 111, 109,  47, 112,  63, 107,  61,
     88,  87, 114, 102,  49, 105, 116,  45,  72, 105, 108,
    113, 101, 119, 121,  52,  71,  85,  51, 118, 119,  84,
     90,  77,  51,  70, 108,  57,  53,  49, 116, 116,  38,
    102,  61,  50,  49,  48,  48,  48,  53,  48,  49
  ],
  data: 'http://txz.qq.com/p?k=XWrf1it-Hilqewy4GU3vwTZM3Fl951tt&f=21000501',
  chunks: [
    {
      type: 'byte',
      bytes: [Array],
      text: 'http://txz.qq.com/p?k=XWrf1it-Hilqewy4GU3vwTZM3Fl951tt&f='
    },
    { type: 'numeric', text: '21000501' }
  ],
  version: 4,
  location: {
    topRightCorner: { x: 104.99999999999999, y: 6.0000000000000036 },
    topLeftCorner: { x: 6.000000000000003, y: 6.000000000000003 },
    bottomRightCorner: { x: 104.99999999999997, y: 104.99999999999997 },
    bottomLeftCorner: { x: 6.0000000000000036, y: 104.99999999999999 },
    topRightFinderPattern: { x: 94.5, y: 16.5 },
    topLeftFinderPattern: { x: 16.5, y: 16.5 },
    bottomLeftFinderPattern: { x: 16.5, y: 94.5 },
    bottomRightAlignmentPattern: { x: 85.5, y: 85.5 }
  }
}

標籤：javascript 图片

上一篇：將影像轉換為三逗號分隔RGB的txt檔案

下一篇：我無法使用Pillow在Python中獲取所有元資料標簽