Clear the current image in legacyMode

[JodusNodus]

As asked by @DannyLingard in #23.
A method doesn’t seem like the best way too me. Maybe an onImageLoad handler so you can just hide the element and show it again when a new image is loaded?

[DannyLingard]

@JodusNodus I'll describe my use case which might better illustrate what I'm hoping to achieve. For every successful scan, I run a procedure from onScan() allowing the user to interact with the output.

Part of this procedure is to toggle the delay to false, so while the user is interacting with the output, the onScan() method isn't running. If the user completes/exists the procedure, I toggle the delay back to a ms interval, allowing the onScan() to re-run for future successful scans.

With legacyMode, if the user complete/exits the same procedure from onScan(), as soon I toggle the delay to a ms interval, it immediately re-runs the onScan() on the same image that was originally loaded (I don't think there's a way I can currently stop this?).

I notice the img initially has no src attribute, with the upload generating a base64 src. What's the better approach, to attempt to delete the src attribute (I can see previous repaint bug in Stack Overflow), or having the file upload create a new Image, which can be hooked into and deleted after use?

[JodusNodus]

Hmm it shouldn’t rescan when changing the delay in legacyMode. I will take a look at that. Why would you need to change the delay in legacyMode though?

[DannyLingard]

Should onScan only fire once in legacy? I'm not currently testing for legacy mode in my onScan so it's possible toggling from false back to an integer fires it again. I'll give it a test on Monday and let you know.

[JodusNodus]

Just tested it out. The scan handler is only called once in legacyMode as it is supposed to. Changing the delay to false and back does indeed trigger another scan. I'll fix that.

[DannyLingard]

@JodusNodus Thanks for the recent updates, just tested 1.1.1 and all seems to be working fine.

With iOS being a huge chuck of my target user base, trying to provide the best possible legacy experience is one of my top priorities until we can access the webcam.

maxImageSize and delay are 2 properties that I'll be looking to set dynamically based on hardware and/or state as I don't generally think we should be exposing these options to the average user on the main interface. There are however instances where we would need to expose them as either presets or a slider.

A use case would be if a user cannot scan a qr code, or a loaded image of a qr code fails to decode. In live mode, this could be caused by a small qr code or a slightly blurry image with too much light loaded by the user. There are ways in live view that we achieve this dynamically but I don't think it's currently possible in legacyMode without the user having to reload multiple images.

An onImageLoaded handler would be good as it would allow me to measure the progress through the onScan() and provide feedback if there's !data. However, it appears as though the img src needs to physically change to re run onScan(). My thought process is if there's !data, I'd notify the user that the "image quality will be maximised" to ensure the best possible measure(while also reducing the delay). This would only last one onScan() before being reset. From there, I'd want to rerun the image through onScan() at source resolution.

In terms of image compression, where does it take place? Is the base64 src compressed or does it only compress when it runs through onScan()?

[JodusNodus]

Sorry somehow i didn’t see this.
If your user base is mostly mobile, you should definitely upgrade to v1.1.2. I made some performance improvements in the QR decoding code that causes up to a 10x speed increase. The API hasn’t changed so its an easy upgrade.

Yes i can see how an onImageLoad handler would benefit that use case, i’ll add one tomorrow.

The compression is done in the simplest way possible. The full res image is copied on to the canvas. The canvas resolution is lowered to decrease the data size. That canvas data is then used by the decoder.

[JodusNodus]

Added onImageLoad in a4547e1. 👍
Will publish when i have more improvements.