繁体   English   中英

jpg到base64 javascript

[英]jpg to base64 javascript

我正在工作。 我需要将我的jpg文件转换为base64。 我使用我在这里找到的Canvas方法。 我有一个服务,为每个图像网址调用其他服务,然后我需要打印这些图像。我的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
    }
})

我发现了什么问题。 将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.
      }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM