Question

我使用jsPDF生成PDF文档，但是我需要将表单中提交的图像添加到此文档中。

// 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执行此操作的可靠方法。

我找到了以下方法，允许我使用XMLHttpRequest从URL中提取DataURI。

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生成器将不断添加页面并将图像异步放置在不正确的页面中。

如何从URL图像以同步方式获取DataURI？

感谢您对此问题的任何帮助。如果您需要更多详细信息，请告诉我。

Answer 1

不要返回结果。而是将其传递给回调函数：

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

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

1 个答案: