javascript - получение данных из изображений URL (синхронные запросы BLOB-объектов XMLHttpRequest) - PullRequest
Новая
       29

javascript - получение данных из изображений URL (синхронные запросы BLOB-объектов XMLHttpRequest)

0 голосов
/ 29 мая 2018

Я создаю документ PDF с использованием jsPDF , однако мне нужно добавить изображения, представленные в форме, в этот документ. 

// You'll need to make your image into a Data URL
// Use http://dataurl.net/#dataurlmaker
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAg[...]' //snip
[...]
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)

Однако, как показано в фрагментевыше мне нужно преобразовать файл в DataURI, но я не нашел ни библиотеки, которая делает это, ни надежного способа сделать это с чистым JavaScript.

Я нашел следующий метод, который позволяет мне извлечьDataURI из URL с XMLHttpRequest. 

function obtenerDataUri(url, pos, lastpos, isleft) 
{
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'blob';
    request.onload = function() {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload = function(e){
            var imgData = e.target.result.replace("data:application/xml;", "data:application/png;"), pos, lastpos, isleft;
            doc.addImage(imgData, 'PNG', (isleft) ? 15 : 90, (isleft) ? pos : lastpos, 75, 75);
        };
    };
    request.send();
}

Этот метод не работает для меня, потому что он асинхронный, это означает, что я добавляю содержимое в PDF после его полной генерации.Этот метод не работает синхронно, потому что responseType не поддерживается в синхронных запросах (возможно, из-за устаревания).

Обратите внимание, что эти изображения уже загружены на сервер, когда PDF готов для генерации, поэтомуЯ не могу получить DataURI для локальных файлов.

Эта функция вызывается здесь: 

$('#imgArea img').each(function()
{
  g_bPDFGisLeft = !g_bPDFGisLeft;
  var bPDFGposCheck = true;
    while(bPDFGposCheck)
    {
      var pos = (g_iPDFGpage == 0) ? doc.autoTable.previous.finalY+8+(75*g_iPDFGimg) : (75*g_iPDFGimg);
      if((pos+(75*(g_iPDFGimg+1))) >= 300)
      {
        doc.addPage();
        g_iPDFGimg = 0;
        g_iPDFGpage++;
        bPDFGposCheck = true;
      }
      else
        bPDFGposCheck = false;
    }

    obtenerDataUri($(this).attr('src'), pos, g_fPDFGlastPos, g_bPDFGisLeft);

    g_fPDFGlastPos = pos;
    if(!g_bPDFGisLeft)
      g_iPDFGimg++;
});

После выполнения obtenerDataUri, поскольку он выполняет запрос, не будетдождитесь завершения функции onload.Это означает, что генератор PDF будет продолжать добавлять страницы и асинхронно размещать изображения на неправильных страницах.

Как получить DataURI синхронно из изображений URL?

Я ценю любую помощь сЭта проблема.Пожалуйста, скажите мне, если вам нужно больше подробностей об этом.

1 Ответ

0 голосов
/ 29 мая 2018

Не возвращать результат.Вместо этого передайте его функции обратного вызова: 

function obtenerDataUrl(url) 
{
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'blob';
  request.onload = function() {
      var reader = new FileReader();
      reader.readAsDataURL(request.response);
      reader.onload = function(e){
          //return e.target.result;
          handleResult(e.target.result);
      };
  };
  request.send();
}

function handleResult(result) {
    var imgData = result; // or take whatever you need inside result
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
}
...