iOS: multiple scan does not override the first image

[dylanvdmerwe]

Running scan.scanDoc(1 multiple times on iOS returns the fileUri of:
file:///var/mobile/Containers/Data/Application/257745E6-2D8A-41F4-8C01-6C87D4BEE540/Documents/image.png

However on multiple photos, the image.png is not overridden with the new image and always returns the first image taken.

Should each consecutive image capture rather not create a brand new file in the phone's temp directory and return it? This was multiple captures can take place at the same time and not override each other.

[ChrisTomAlx]

Hello my friend. I see you have raised quiet a few issues. It has been a hectic week. I will try to cover all the issues you have raised as and when I get the time to.

So let me ask first, how exactly are you doing multiple scans? One ends, you use the result of that, then the next scan begins? Because in my tests, with a single scan. The image gets replaced every time I restart the scan.

There is a fix, by making the name of scanned image unique, but then the problem of deleting scanned image after use comes into play.

Cheers,
Chris
Neutrinos

[dylanvdmerwe]

Hi. Absolutely no problem, I will help as much as I can. I was just playing with the awesome plugin 👍

So let me ask first, how exactly you are doing multiple scans? One ends you use the result of that, then the next scan begins? Because in my tests, with a single scan. The image gets replaced every time I restart the scan.

There are two scenarios:

1. You have three buttons and three images on a page. Each button takes a scan and sets it's corresponding image to the result of the scan.
2. You have a single button with a single image, that on scan the image is replaced. The image may not turn out how you want, so you press the button to take another scan and replace the previous image.

As far as cleanup goes, this is why things are stored in the temp dir. Otherwise the user must explicitly delete these files in a cleanup step. OR give the ability to return base64 instead of the fileUri. #someThoughts

[onaluf]

I've run into the same situation. I think it's linked to the way the webview is caching the file (in my case I created an HTMLImageElement and set the src). To work around the issue I ended up concatenating '?' + Date.now() to the file URL before assigning it to the Image element source. You may want to try to see if this works for you too.

If that's the case the plugin could do that for you when it generates the URL... maybe using md5 instead of a timestamp?

[menjada]

Did any find a good solution on this? I got same image every time? Use one button and used the timestamp

[menjada]

Sorry, tested the '?' + Date.now() more correctly solved the problem

[humblecoder]

@onaluf @menjada how did you change the name of the file on the fly? I see no option(s) for that. Did you manipulate it manually somehow after the fact? 🤔 Also, how long do the files hang around between scans?

[onaluf]

@humblecoder so lets say you want to use an Image element to load the scanned document, you would typically do something like:

scan.scanDoc(0, onSuccess);

function onSuccess(imageURI) {
   var myImage = new Image(100, 200);
   myImage.src = imageURI + '?' + Date.now();
   // ... do your thing with myImage
}

Since all that is required by the src property is a valid URL, it's completely valid to add a url parameter there. And since caching is based on the full URL, including its parameter it will be bypassed.

The same solution should apply in different situations too.

[humblecoder]

@onaluf this didn't work for me. I'm using VueJS and creating arrays of object with the src. So, for example:

...
this.scanArray.push({uri: `${imageURI}?${Date.now()}`})
...

In the template I have a v-for setup to list images for each array item. It simply repeats the same image, regardless of what is appended to the URI.

[onaluf]

I’m not entirely sure since I don’t know VueJS but here is what I think is happening. Like said at the beginning of the thread there really only is a single image accessible at a given point in time. The solution I provided is a way to make sure that at a later time, once you captured a new image you are able to load it instead of the cached version.

If you want to be able to display more than one captured document at the same time you will have to do something with those image. What I do is stamp them in a canvas:

1. Scan document
2. Create a canvas and draw the image on it with drawImage
3. Get the data url of the content of the canvas with toDataURL
4. Use this URL to pass around to APIs or display in you template, it will not “expire”

Repeat for as many images you want but keep in mind that those url will take lot of place in memory.

[humblecoder]

@onaluf yeah, I actually just move each file to a new tmp directory on creation to force the app to create new files. Thanks for the input.

[ChrisTomAlx]

Hi guys!

I am beginning to look into this issue. So that you don't have to add '?' + Date.now(); to the URI. I have a question though. Is this an iOS only issue or is anyone running into this issue on android as well?

Cheers,
Chris
Neutrinos

[ChrisTomAlx]

Hey just a small update. From plugin version 4.x.x you can create files with specific filenames in ios.

Just remember two things

• If you reuse the same filename you will have to use '?' + Date.now().
• Also remember to clean up and delete your files if you are creating new ones with unique filenames

Cheers,
Chris
Neutrinos