在浏览器中使用 PDFkit，从链接插入图像

Question

有没有一种简单的方法可以从 url 获取图像并将其放入 PDFKit pdf 中？

我有一个在浏览器中自动生成的 PDF。我想要包含一张图像，并且我有一个 URL。问题是我正在浏览器中生成 PDF。由于我从互联网上获得了 URL，因此似乎应该有一种简单的方法可以将该图像转换为 PDFKit 可读的内容。

Javascript 有没有办法将图像 URL 转换为 PDFKit 可读的缓冲区？

我想要的是您希望以下命令执行的操作：

doc.image('http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg')

提前致谢。我在网上找到的解决方案让您的服务器接收链接，并使用缓冲区进行响应。这是唯一的方法吗？或者有没有一种方法可以在浏览器中进行，无需 http 发布？

Answer 1

这是一个相当老的问题，但我会添加我的注释，因为这是在 Google 上查找“pdfkit 浏览器图像”时的第一个建议。

我的解决方案基于 PDFKit 支持的data uri 选项：

只需将带有 Base64 编码数据的图像路径、缓冲区或数据 uri 以及一些可选参数传递给图像方法即可。

因此，快速浏览后，我发现从图像 URL 获取数据 uri 的一般方法是使用画布，就像这篇文章中那样。将其放在PDFKit 的交互式浏览器演示中：

function getDataUri(url, callback) {
  var image = new Image();

  image.crossOrigin = 'anonymous'
  image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

    canvas.getContext('2d').drawImage(this, 0, 0);

    // // Get raw image data
    // callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

    // ... or get as Data URI
    callback(canvas.toDataURL('image/png'));
  };

  image.src = url;
}

// Usage 
getDataUri('http://pdfkit.org/docs/img/14.png', function(dataUri) {
  // create a document and pipe to a blob
  var doc = new PDFDocument();
  var stream = doc.pipe(blobStream());

  doc.image(dataUri, 150, 200, {
    width: 300
  });

  // end and display the document in the iframe to the right
  doc.end();
  stream.on('finish', function() {
    iframe.src = stream.toBlobURL('application/pdf');
  });
});