jpg to base64 javascript

Я работаю в угловой. Мне нужно преобразовать файлы jpg в base64. Я использую Canvas Approach, который я нашел here. У меня есть служба, которая вызывает другую службу для каждого URL-адреса изображения, а затем мне нужно распечатать эти изображения. Мой html-файл не содержит base64, который, как указано в log, пуст. Что я делаю не так ?jpg to base64 javascript

Первая служба

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

источник

2016-05-30 Korte

Непохоже, angularJS ко мне ... Пожалуйста, предоставьте контроллер/директиву и вид. Кроме того, создание html в функции не является угловым способом, если вы не в директиве, и это не похоже на директиву. –

Я создаю html-файл, чтобы печатать в формате pdf. Я не показываю его на устройстве. Я просто использую эти службы, чтобы напечатать их. – Korte

Я нашел то, что был неправ. Функция, которая преобразует 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. 
     }

источник

2016-06-02 18:58:31 Korte

ответ

Смежные вопросы