![](/img/trans.png)
[英]Problem in Converting an image (jpg) to Base64 format in 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.