我正在 Angular 工作。我需要将 jpg 文件转换为 base64。我使用我发现的 Canvas 方法 here 。我有一个服务为每个图像 url 调用另一个服务，然后我需要打印这些图像。我的 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.
}
关于javascript - jpg 转 base64 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37531423/