Bug: Not working with inline image URL

Hey,

I am trying to use this library to decode a QR code rendered on canvas. To achieve that, I use canvas.toDataURL() to encode the QR code in the image URL. This gives us something like this.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAM1UlEQVR4Xu2c67obqQ5EM+//0Gc+J7PHnj42VQVSX9wrfwEhLaA2UuP89evXr//92vffXy/TOXO/9h956tgajd/OM2Pvx4YzdhSXM75q1Vy+VfNhBwLTBB6bdc/D8XAUwfqzXAjW9LZl4F0JIFjPleeGdddTQNyXIYBgIVikhJc5rjj6TrAqN/C7dHOUEjq3HNc/J9V1bamd4sy1Wj/r8rXKrmJEOwSWCSBYywh/G0CwajhiBQJDAghWzQZBsGo4YgUCCNaAQFU6hGBx0CCwAwHnhjVzGEfvkbpqWCt+fkrr1BOM5N1VZQ0rjTVhvsO2YwoIzBE4WrCU16po/zo+6ftuXjVetSe+bG2lHxsQLLVzaP9KAgjWc1mVIKl2BOsrjwhBnYkAgoVgVdXxzrSv8eVLCRwtWGlqU70Mqkal5vt02NO4SAkVadoh8M/v2WbqKQrebNH9nd1VUXGL3anIPOyuCNboZqPSz9RXiu5qx9J+CQJXuGEhWH+20goHBOsSxxEnFQEEa1zDcvi96+PcgLhhKbq0Q2BD4O6CVb0hkndZCFY1fex9PYGrCdZ2QdRNZiWNGtWoHm2jOpOqQamNpcaruLf2SQkVcdovQQDBGi/T7C1ICY7aHGo8gqUI0v6VBK4gWCvgK29YqUgov2fF8NPtbjQfNyy1GrRfggCC5d+wEKxLbGmc/GYCjmCtxJ+mNs4DSuWP+3JbvT9z6mVJkX1UV0rmUvGr9jRuZY92COxGAMF6olZClxbZ1SKupITK9qgdwVqhx9hDCbwTrG6HknrKTBo2uvV0zz3LruJmWTX3rB3GQaCdwBUFSxXSOwXryLm7NoO6WXbNi10IxAQQrM8pYVp/e1jqFMt4cc0BCJYJim7HE0CwECwE6/hziAcmAQTLBFXQ7Sr1s4JQMQGBHgJX/+uafrlTNagt5bT/6/jkK+DV16Fnd2IVAhsCVz8oCBZbGgI3IoBgjRebG9aNDgOhnp/AjGCpr2evUSd9HVrOu6yV1+dnTQmduD+lo2rszB5w1oo+ECgnMLNZExFK+jrBqcP3sJEIVhL/Svq5jS19be7EjWA5O4g+lyaQHNifQBMRSvo6IJ2Di2Bl/53yzB5w1oo+ECgnMLNZExFK+jrBIVgOJQTLo0SvyxF49w6r4ndtrhBWpEbu6/LVxelMCR3fXKbKVspc2aMdArsRQLB81AiWz4qeEGghgGD5WBEsnxU9IdBCAMHysSJYPit6QqCFwNl+SzgTpFvDSj8ArBb4k5/mOHG7NSwVJzUshzZ9TknAFazKw7dq69P49KA+FqTLF7XYiRgqW9v2lIMrhKkf9IdAOQEE6zPSvUVl68mskCBY5ccEg2chgGAhWLPCeJY9jB83InC0YDm3GLUcKzUsZVu1z76qd+J+FZK04D+6rVHDUqtK+2kJvPvrqlKKymCcg6vm+wbBUrecVLCS2pyaW/GnHQK7EUCw1lBX3bCUaCBYa+vE6C8hgGCtLSSCtcaP0RCICMwIlpPG7Zmm7TnXp9pQwuRhw+kfLeSms6p/vXZXt7sVPxgLgVICRwuWCqaynpbackRl9k3YNm5nLsUq8QXBUjRpPyUBBOvzsjgikohEUgif2SyJLwjWDGHGHE7AFaxKR1cPbnIwVWqk2lXcVTUsNY/TnnBBsByi9DkdAQTruSTOjerMNSwE63THC4eqCTgFV1X7UQfdmeMnLmXr0S85mOoGVdWuGKma1TYmh8Mn8VRzueOq9xr2ILBMwBETdRjV4XLmQLD+u5SK6buFT4SclHD56GDgCAJHpIR7xqluUJ2+HDl3ElfyByWxS18IlBNwBUsdvtm/7ml64tw8Zn3ZOy1LmDpxJ5sDkUpo0fc0BBCs51IgWKfZljgCgfcEECwEi7MBgcsQqBKsqoBVqpKmRirtGhWf07lSBso31Z7O96m/Yl41D3YgsExgRrC2k6qDXXkg1FxJTUz9v1DpXOliKEFy29VXXLVeleuTMqA/BCICCFZtSpjAdwXpYZP/XiYhS9+vJYBgIVjcsL72eH9fYI/N2p36jNI0Z251ExmtysrY7tU+i28IVvdKY7+MwDvBmvm8/zOmQ4DSgz37DmsGahL3Sn3N8S3xBZFyiNLndAQQrLUlSUQCwVpjzWgI/P4hccXXsuTgrtyY0hvc6xI7Y9MtkcSNYKV06Q+BDQG36J6CS9KyagGbnTuNUYlhGlciaCu+MhYClyWAYNUsnXoLNXO7o85UszZY+SICCFbNYiJYNRyxAoEhAQSrZoMgWDUcsQIBKVgz6cpdsI7Ssm5uqgY2Kvirsa/rR+p5l938BXEe8ZVwhO3Mb8C2fqeClYjIYy7VH8H6ggNICBkBBGvMq/KGpQRo9JVw5beESli5YWVnht4HEkCwECwE68ADyNQZgXeClVn403vlAeXMfEeNSW9Jn2pF6tazGl/iJ4K1SpvxuxGYFayuTV7xtS15ODoqPitfXsc6ApQwc+yNUkjlW+LLbpuRiSCgCCBYT0JOwX9WDF9voWpNHu0IlkOJPrcjgGAhWLfb9AR8XQKzgvUpHXFuBkl9ZXszSe2r1GglJXR8Ge2MlIPaZbO3P9JDRZb20xA44ithelCPOlCqhqUES8Wp2t0aVbqZ1P/OkdqjPwR2I4BgfUaNYO22DZkIAh6BIwTL82yfXunD0ORWpPqqdveGpYR1a4cb1j57i1kaCCBY179hIVgNBwOT5yTg1IdUrWZbGB9Funq4qik68TtzqrhW2zuZVjFwONEHAksEnM2KYGnEq4KkxiNYeg3ocQMC1c8aVL3kHdK0jnSmZfnx3RH1UU1qZXwqdtSwzrSD8CUi4AqWKhDPvgFS6WRyGGcOfQTrTeckbuc2+zOFE0ti79V1BGt11Rl/GAEEaw09grXGj9EQiAggWBGu/+uMYK3xYzQEIgJVghVNuumc1rBUerriS+fYJIVLUsIkbX7ER0rYucrYbiXw7hCtHoC0uJwc5K3tka9pHAq0IyKvNrriShiomGiHwKUIIFj+ciFYPit6QqCFAILlY0WwfFb0hEALgZkalpOSJM6qmlRa45qdW42rFKzUlvJtzzQ89YX+ECgj4PyWUE22evgQLEXYa+/6YunNTi8I7EAAwfIhp8LceTN85zWC5a8lPS9KAMHyFw7B8lnREwItBFY+vVc4lIrAY86um0S3LyNe6TokTzZUXOncFeuODQhMETh6s6rDtGfq0+0LgjW1RRkEgScBBOvJAsHiZEDg5AQQLATr6D1w8iOCe2ci4L7DqvRZPWOonGtra+8vd24sW79UjSr9SVJlOurGRD8IlBM4WrBUQCtpmjr0am7VrnxLxHFvweJWpVaX9lMSQLDmlwXBmmfHSAhMEUCwprD9HoRgzbNjJASmCNxNsJJajhIkBfzMKeGr76SHaiVpPw2Bipfuo2BW60hqfGfx2RGs2cO++p/oKS7JmszGcJpNjCP3IYBgPdfaKXxvd8bsYUew7nPGiLSQAIKFYM2KbuE2xBQEPAKOYDmp0aebR5q6zMyVzF1dw5r9XWNFnO5tT82FYHlnhV4nIHA3wRo9WnVSQvdwK6FWIjKzNRLxpOg+Q5gxhxNAsLKUEME6fMviwJ0JHC1YHTcNN+3be+6z7jNXhM/qP37diACCdaPF/hAqgsUeuAyBswnWSh3JuTEljzlXF3FUL3vYTn1R9mZvlgjW6kozfjcCCNYTtSN4ycIogUGwEpr0hcA/f+XVI8aZg/xzGNOvZekNa8a3T1/IVm2deUMlX0fPHAe+3ZzA0TcshT8VvNdUyxGgqnTImUvFum1XN7RR/9Fc6g9U6if9IbAbAQSrBjWCVcMRKxAYEkCwajYIglXDESsQQLAGBJKUsEOURoszmxKmaXTCgOMEgUMJODesFQfV4Vmx/Rjbbf/VP0ewZj82vOMw+xVxTyar68d4CEQEECwfF4Lls6InBFoIIFg+VgTLZ0VPCLQQeCdYLRO9GE1qJo5IbP1N7Cexzvjyan+2JvUp9U1834vRik+MhYAkgGBJRP92SAUrrUGNRCWdW0XVJepqXtohsEQAwfLxpaKBYPls6QkBiwCCZWH63QnB8lnREwItBEgNWrBiFAIQ6CCAYHVQxSYEINBCAMFqwYpRCECggwCC1UEVmxCAQAsBBKsFK0YhAIEOAghWB1VsQgACLQQQrBasGIUABDoIIFgdVLEJAQi0EECwWrBiFAIQ6CCAYHVQxSYEINBCAMFqwYpRCECggwCC1UEVmxCAQAsBBKsFK0YhAIEOAghWB1VsQgACLQQQrBasGIUABDoIIFgdVLEJAQi0EECwWrBiFAIQ6CCAYHVQxSYEINBCAMFqwYpRCECggwCC1UEVmxCAQAsBBKsFK0YhAIEOAghWB1VsQgACLQT+Bl9BJ9Om8CmyAAAAAElFTkSuQmCC

We then render the image on page like so.

const img = new Image();
img.height = canvas.height;
img.src = canvas.toDataURL();
img.width = canvas.width;
document.body.appendChild(img);

Finally, we try to decode our QR code.

const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(img);

Unfortunately, this operation fails with the following error message.

Error
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.selectBestPatterns (FinderPatternFinder.js:546)
    at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.find (FinderPatternFinder.js:165)
    at Detector.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/Detector.js.Detector.detect (Detector.js:66)
    at QRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/QRCodeReader.js.QRCodeReader.decode (QRCodeReader.js:63)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.readerDecode (BrowserCodeReader.js:254)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeOnce (BrowserCodeReader.js:229)
    at BrowserCodeReader.js:180
    at new Promise (<anonymous>)
    at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeFromImage (BrowserCodeReader.js:171)
    at index.js:100

If I try to screenshot the rendered <img />, save it to my computer as screenshot.jpg and modify my code as follows…

img.src = 'C:\fakepath\screenshot.jpg'

…we get back this.

{
    format: 11,
    numBits: 288,
    rawBytes: Uint8Array(36) [65, 183, 55, 87, 6, 87, 39, 54, 86, 55, 87, 38, 86, 182, 87, 151, 7, 38, 247, 
70, 86, 55, 70, 86, 70, 86, 70, 151, 64, 236, 17, 236, 17, 236, 17, 236],
    resultMetadata: Map(2) {2 => Array(1), 3 => "H"},
    resultPoints: (4) [FinderPattern, FinderPattern, FinderPattern, AlignmentPattern],
    text: "supersecurekeyprotectededit",
    timestamp: 1533052481452
}

Yay, it works! However, this is not a desired behaviour as we cannot expect the user to download a picture of the canvas on their computer and then upload it again.

Any suggestions how to fix this? I am sure there is a way to achieve what I am trying to do since scanning input from device camera is essentially doing the same thing. Thanks!

[mrlubos]

Still not fixed, bot. 🥴

[mnomansadiq]

Is there any solution of this ? I also doing same to create Image and set src but decodeFromImage given error that “either src or a loaded img should be provided”