javascript-从URL图像获取datauri（同步XMLHttpRequest blob请求）

Question

I'm generating a PDF document using jsPDF , however I need to add the images submitted in the form into this document.

// 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)

However, as shown in the snip above I need to convert the file to DataURI, but I haven't found a library that does this, nor a reliable way to do it with pure JavaScript.

I found the following method that allows me to extract the DataURI from an URL with 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();
}

This method doesn't work for me because it's asynchronous, it means I'm adding the content in the PDF after it's fully generated. This method doesn't work synchronously because responseType is not supported in synchronous requests(probably due the deprecation).

Note that these images are already uploaded to the server when the PDF is ready to be generated, so I can't get the DataURIs on local files.

This function is called from here:

$('#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++;
});

After executing obtenerDataUri , due the fact it's doing a request, won't wait until the onload function completes. This mean the PDF generator will keep adding pages and placing the images asynchronously in the incorrect pages.

How can I get the DataURI in a synchronous way from URL images?

I appreciate any help with this issue. Please tell me if you need more details about this.

Answer 1

Don't return result. Instead pass it to a callback function:

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