Question

我正在工作。我需要将我的jpg文件转换为base64。我使用Canvas方法，我发现here。我有一个服务，为每个图像网址调用其他服务，然后我需要打印这些图像。我的html文件不包含base64，就像日志说空白一样。我做错了什么？

第一次服务

    .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");
                }

        }
    }

})

第二次服务

    .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
    }
})

Answer 1

我发现了什么问题。将jpg转换为base64的函数是异步的，所以我不得不在回调中传递我的所有代码imgConvertToBase64.toDataUrl(i, function (dataUri) { //here })

在

中

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

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

jpg到base64 javascript

1 个答案: