jpg to base64 javascript

Question

I am working in angular. I need to convert my jpg files to base64. I use the Canvas Approach which I found here. I've got a service which calls the other service for each image url and then I need to print those images.My html file doesn't contain the base64 which is as log says blank. What am I doing wrong ?

First Service

    .service('exportSrv', function ($cordovaPrinter, imgConvertToBase64) {

    return {
        prepareHtml: function (photos, itemsPerPage) {

           //Some variables

            switch (itemsPerPage) {

            case 1:
                subtitle = '1/page';
                head += style_100 + '</style></head>';
                body = '<body>';

                var toBase64fun = function (i) {

                    src = '../all/' + photos[i].src + '.jpg';

                    imgConvertToBase64.toDataUrl(i, function (dataUri) {

                        console.log(dataUri);

                        if (!photos[i].iden)
                            recText = notRec;
                        if (photos[i].genre == "F")
                            icon = 'female-icon.png';
                        else
                            icon = 'male-icon.png';

                        var base64 = dataUri;

                        body += '<div class="container"><figure class="elements padding"><img src="' + base64 + '"alt="Den tin vrika"><figcaption><img class="icon" src="../img/all/' + icon + '"><p>Author: <i>' + photos[i].author + '</i>' + recText + '</p></figcaption></figure></div>';

                        i++;
                        if (i <= photos.length)
                            toBase64fun(i);
                        else {
                            body += '</body>';
                            htmlFile = '<html>' + head + body + '</html>';
                            console.log(htmlFile);
                        }


                    })

                }

                toBase64fun(0);



            case 2:
                {
                    //Same stuff...
                }

                if ($cordovaPrinter.isAvailable()) {
                    cordova.plugins.printer.print(htmlFile, 'photos: ' + subtitle, function () {
                        console.log("Print is done");
                    });
                }    
                else {
                    alert("Printing is not available on device");
                }

        }
    }

})

Second service

    .service('imgConvertToBase64', function () {
    function toDataUrl(url, callback, outputFormat) {
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            var dataURL;
            canvas.height = this.height;
            canvas.width = this.width;
            ctx.drawImage(this, 0, 0);
            dataURL = canvas.toDataURL(outputFormat);
            callback(dataURL);
            canvas = null;
        };
        img.src = url;
    }

    return {
        toDataUrl: toDataUrl
    }
})

Doesn't look like angularJS to me... Please provide the controller/directive and the view. Also, building html in a function is not the angular way, unless you're in a directive, and this doesn't look like a directive.. — Christian Bonato, May 30 '16 at 18:13
I build html file in order to get printed as pdf format. I don't render it on device. I just use those services in order to get it printed. — korteee, May 30 '16 at 18:22

score 0 · Answer 1 · answered Jun 02 '16 at 18:58

I found what was wrong. The function which converts jpg to base64 is asynchronous so I had to pass all my code in the callback imgConvertToBase64.toDataUrl(i, function (dataUri) { //here })

In the

else {
            body += '</body>';
            htmlFile = '<html>' + head + body + '</html>';
            console.log(htmlFile);

            //Here I had to add the function which actually prints my html.
      }

jpg to base64 javascript

1 Answers1