jpg转base64 javascript
jpg转base64 javascript
提问于 2016-05-31 02:02:11
我在angular工作。我需要将我的jpg文件转换为base64。我使用我发现的here的Canvas方法。我有一个服务，它为每个图像url调用另一个服务，然后我需要打印那些不包含base64的images.My html文件，因为日志显示为空。我做错了什么？
第一个服务
.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
}
})回答 1
Stack Overflow用户
发布于 2016-06-03 02:58:31
我发现了问题所在。将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.
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37531423
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号