Feature Request: BASE64 output

[ATY77]

Is there a way to directly get the BASE64 encoded output of the image or can u please add this as a new feature?

[ChrisTomAlx]

Currently the plugin only returns the imageURI. But it is a good feature to have and I will add it to the future roadmap. In the meantime you can probably use the imageURI and convert it to base64 directly using something like this :- https://stackoverflow.com/questions/17710147/image-convert-to-base64

Cheers, Chris Neutrinos

[ATY77]

Thanks for the quick response. For now i fixed this with FileReader readAsDataURL to load imageURI.

[ChrisTomAlx]

Awesome.

Will leave an update here when we add this feature. Thank you for your interest in our plugin :)

Cheers, Chris Neutrinos

[gelinger777]

@ChrisTomAlx will it take long?
@ATY77 where exactly did you made the change?

[ChrisTomAlx]

@gelinger777 For now there isn't an exact time line. But you could try the solution I provided in the comment above.

Cheers, Chris Neutrinos

[gelinger777]

@ChrisTomAIx could you hint exactly in which file you did the change?

[ChrisTomAlx]

@gelinger777 To be honest I am not great with javascript. But if I was doing it, this would be the steps I would follow :-

1. Get the file URI from the plugin and set it as src of an image (Here myImage specified in the HTML)

scan.scanDoc(0, onSuccess, onFail);

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI; // For iOS, use image.src = imageURI + '?' + Date.now();

}

function onFail(message) {
    alert('Failed because: ' + message);
}

2. Then use this image to draw a canvas and then get the base64 from it using toDataURL(). Got the following code from here

    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(image, 0, 0);
    dataURL = canvas.toDataURL(outputFormat)

3. So the full code would look like as follows

scan.scanDoc(0, onSuccess, onFail);

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI; // For iOS, use image.src = imageURI + '?' + Date.now();
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(image, 0, 0);
    dataURL = canvas.toDataURL()

}

function onFail(message) {
    alert('Failed because: ' + message);
}

4. • Things to keep in mind. You probably need to run the base64 conversion in a promise so that it doesn't cause the rest of your UI to hang.
     • Play around with the additional options for toDataURL(). You might find it useful.

Let me know if you need more help. I will see what I can do.

Cheers, Chris Neutrinos

[gelinger777]

Thank you @ChrisTomAlx !!

[ChrisTomAlx]

Hey guys.

Added this feature in ver 4.2.0 of the plugin. You can now pass in returnBase64 boolean property inside the options object to get the base64 data instead of the imageURL. As shown here :- {returnBase64 : true}.

As mentioned in the readme, by default returnBase64 will be set to false.

Example :-

    scan.scanDoc(successCallback, errorCallback, {sourceType : 1, fileName : "myfilename", quality : 1.0, returnBase64 : true}); 
    // sourceType will by default take value 1 if no value is set | 0 for gallery | 1 for camera. 
    // fileName will take default value "image" if no value set. Supported only on 4.x.x plugin version
    // quality will take default value 1.0 (highest). Lowest value is 5.0. Any value in between will be accepted
    // returnBase64 will take default boolean value false, meaning image URL is returned. If true base64 is returned
    function successCallback(imageData) {
        alert(imageData); // This might freeze up your phone for a while
        console.log(imageData); // This might freeze up safari/chrome in dev mode for a while
        //var image = document.getElementById('myImage');
        //image.src = imageData; // Image URL rendering. 
    //image.src = imageData + '?' + Date.now(); // For iOS, use this to solve issue 10 if unique fileName is not set.
    //image.src = "data:image/jpeg;base64," + imageData; // Base64 rendering
    }

    function errorCallback(message) {
        alert('Failed because: ' + message);
    }

Closing this issue. Please raise a new issue if you are having troubles with the update.

Cheers and thank you, Chris Neutrinos