Image as base64 to style background-image:url() issue

[MichaelSamteladze]

If you have following setup:

navigator.camera.getPicture(
            SuccessCallback,
            ErrorCallback,
            {
                quality: 40,
                destinationType: Camera.DestinationType.DATA_URL,
                encodingType: Camera.EncodingType.JPEG,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                correctOrientation: true,
                cameraDirection: Camera.Direction.FRONT
            }
        );

and

OnTakePictureSuccess: function (ImageBase64) {
ImageBase64 = 'data:image/jpeg;base64,' + ImageBase64
$(Selector).attr('style', "background-image:url('" + ImageBase64 + "')");'');
    }

Displays empty image, but if you replace some whitespaces and newlines in Base64 then it works

ImageBase64 = 'data:image/jpeg;base64,' + ImageBase64.replace(/\r?\n|\s{1,}/g, '');

Problem found on iOS 9 and Android 6.

[janpio]

Are you saying the base 64 image date being returned from getPicture is broken?

[MichaelSamteladze]

Yes data is not quite accurate.

[janpio]

Does this only affect background-image:url( ... )? Does this also happen in other OS versions?

[MichaelSamteladze]

Yes it only affected background-image, to be honest I didn't try other iOS versions, this also happened in android 6

[janpio]

Does this make sense to you that it only affects background-image, but not other uses?

[MichaelSamteladze]

Well the reason I reported this issue is that, I spent few days understanding what is wrong and time is critical when you have deadlines.

Its frustrating when you find an issue in core plugin, cause you have to run it in you production code.

Final code has some dirty moments because I had to apply this little patch and now I have to make an explanation comments why I did that.

I'm sure I'm not alone, in whole world who faced or may fave this problem and I think fix, may make their developer life less stressful.

[janpio]

I don't really know what you are reacting to, I asked a simple question trying to understand the issue further.

[MichaelSamteladze]

Sorry if was tough. Looks like just misunderstood your comment.

Initially it was strange, cause I stored result returned from OnTakePictureSuccess in a variable and printed it out.

I took printed result to test it locally in my test HTML file.

Printed result had newlines, so I thought it was browser formating and I formatted result in html minifiers.

I tried minified in img src="Base64" it worked and also tried it in div style="background-image:url(Base64)" also worked.

Initially I did not realized that html minifier fixed an issue. After I tried original result in img and it worked, then I tried it via div and here I caught a problem.

[janpio]

As you know what is going on, can you create a super simple app with cordova create and implement just what is necessary to show the problem? Put it on Github, so someone from Cordova can have a look at it when there is the time.

[MichaelSamteladze]

Sure, I will take care and I'll update this thread with link

[MichaelSamteladze]

Here is my sample project that failed on my iPad 2, iOS 9.3.1

https://github.com/MichaelSamteladze/CordovaCameraPluginV4.0.3Problem

[fracon]

Hey guys after spent a few days trying to find out why we our app's camera didn't work well in iOS we realize yesterday (November, 26) that we are facing exactly the same problem reported by @MichaelSamteladze. After spent some minutes searching for ocurrencies i found this bug reported and some others threads with people reporting problems with camera but without know that is the exactly problem so as @MichaelSamteladze said i think fix this bug could save a lot of time and stress from other developers.

As information, we are using the 4.0.3 plugin version.

@MichaelSamteladze thanks for the workaround.

[breautek]

Cannot reproduce on modern versions

document.body.onclick = () => {
        navigator.camera.getPicture((e) => {
            console.log(e);
            document.body.style.backgroundImage = `url("data:;base64,${e}")`;
        }, (e) => {
            console.error(e);
        }, {
            destinationType: navigator.camera.DestinationType.DATA_URL
        });
    };

Also works if you specify the JPEG mimetype, but you'll need to guarentee if the data is an actual jpeg encoded image.