Detect QR Code From an Image using Javascript
I’m not a professional programmer, so forgive me if I made some mistakes in doing the code :)
So I made an app that I want to use to detect QR code in an image. I’m using App Inventor to create the android app and to make it easier, I use a web view to process the logic (definitely I’m not an Android developer).
Then I see this web:
This guy, Minhaz, create a helpful js script to detect QR Code from an Image. Please go to that page to get more detail about the script.
My goal was to detect from a saved image in phone gallery. But that was hard to do in App Inventor because web view doesn’t allow you to use file input type to be processed. It will run in a web browser but not in a web view. Strike 1.
I was thinking to just set the file name into the javascript, but unfortunately, javascript is not allowed to access the local system, so it’s Strike 2.
But then I googling for more information and I find that a file data can be created from the file string. The plan was to convert the file to a base64 string, then convert it again to a blob type file, then put it in Minhaz’s script.
function base64ImageToBlob(str) {
// extract content type and base64 payload from original string
var pos = str.indexOf(‘;base64,’);
var type = str.substring(5, pos);
var b64 = str.substr(pos + 8); // decode base64
var imageContent = atob(b64); // create an ArrayBuffer and a view (as unsigned 8-bit)
var buffer = new ArrayBuffer(imageContent.length);
var view = new Uint8Array(buffer); // fill the view, using the decoded base64
for(var n = 0; n < imageContent.length; n++) {
view[n] = imageContent.charCodeAt(n);
} // convert ArrayBuffer to Blob
var blob = new Blob([buffer], { type: type }); return blob;
}
function getQRCode(imageBase64) {
var imageBlob = base64ImageToBlob(imageBase64);
const html5QrCode = new Html5Qrcode(“reader”);
const imageFile = imageBlob;
html5QrCode.scanFile(imageFile, false)
.then(qrCodeMessage => {
setQRCode(qrCodeMessage);
})
.catch(err => {
console.log(`Error scanning file. Reason: ${err}`)
});
}
function setQRCode(QRCode) {
alert(QRCode);
}
getQRCode(base64image);
note: base64image is a Base 64 string encoded from an image
But…., it got an error
html5-qrcode.min.js:5 Uncaught imageFile argument is mandatory and should be instance of File. Use ‘event.target.files[0]’
Strike 3, arghhhhh…
Hmm, so the script requested for an instance of file from the file input. It rejected blob data, even though it’s a file also.
So I wonder, what if…. I take out the checking? So I did it. I replace this line
if(!(t&&t instanceof File))throw”imageFile argument is mandatory and should be instance of File. Use ‘event.target.files[0]’”;to this
if(!(true))throw”imageFile argument is mandatory and should be instance of File. Use ‘event.target.files[0]’”;And voila! I got the QR Code. Hurray!!!
So in case, you want to use Minhaz’s script for API or just send some string to the script, you can use my method, hope works for you.
If you need to know what data inside a QR, especially QR Indonesian Standard (QRIS), you can use this app :) It called QRIS wantuno, design to check QRIS image format and display the data.
Sandi Fajariadi has experience in product development, especially related to payments, e-money and e-wallet. In his spare time he makes mobile applications like QRIS wantuno, cek RS and has released a music album, check his Youtube channel here.
