首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在浏览器中使用PDFkit,从链接插入图像

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

Stack Overflow用户
提问于 2014-10-08 01:22:44
回答 4查看 6.3K关注 0票数 3

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

我有一个在浏览器中自动生成的PDF。有一张我想要包含的图片,我有一个指向它的URL。问题是我在浏览器中生成PDF。由于我可以从互联网上获得网址,所以似乎应该有一种简单的方法来将该图像转换为PDFKit可读的内容。

有没有办法让Javascript将图片地址转换成PDFKit可读的缓冲区?

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

代码语言:js
复制
doc.image('http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg')

提前谢谢。我在网上找到的解决方案让你的服务器接收链接,并使用缓冲区进行响应。这是唯一的办法吗?或者,有没有一种方法完全在浏览器中,而不是http发布?

EN

回答 4

Stack Overflow用户

发布于 2017-12-16 09:45:33

这是一个相当老的问题,但我将添加我的注释,因为这是在Google上搜索"pdfkit浏览器图像“时的第一个建议。

我的解决方案基于数据uri选项由PDFKit支持:

只需将带有base64编码数据的图像路径、缓冲区或数据uri连同一些可选参数一起传递给图像方法。

因此,在快速查看之后,我发现从图像URL获取数据uri的一般方法是使用canvas,如此post中所示。把它放在PDFKit的交互式浏览器demo

代码语言:javascript
运行
复制
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');
  });
});
票数 4
EN

Stack Overflow用户

发布于 2015-01-08 15:12:34

我通过AJAX将图像作为base64编码的字符串进行检索,然后使用以下代码将base64编码的字符串转换为可用的缓冲区:

代码语言:javascript
运行
复制
var data = atob(base64);
    var buffer = [];
    for (var i = 0; i < data.length; ++i)
        buffer.push(data.charCodeAt(i));
    buffer._isBuffer = true;
    buffer.readUInt16BE = function(offset, noAssert) {
        var len = this.length;
        if (offset >= len) return;

        var val = this[offset] << 8;
        if (offset + 1 < len)
            val |= this[offset + 1];
        return val;
    };

    pdf.image(buffer);

另请参阅https://github.com/devongovett/pdfkit/issues/354#issuecomment-68666894,其中讨论了应用于字体的相同问题。

票数 3
EN

Stack Overflow用户

发布于 2017-12-21 08:22:58

我会权衡我在这个问题上的2点意见,因为我刚刚花了很长时间才让它发挥作用。这是我在谷歌搜索这个问题时找到的各种答案。

代码语言:javascript
运行
复制
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());

var files = {
img1: {
  url: 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg',
  }
};

在一个地方使用上面的对象来存储pdf中需要的所有图像和其他文件。

代码语言:javascript
运行
复制
var filesLoaded = 0;

//helper function to get 'files' object with base64 data
function loadedFile(xhr) {
  for (var file in files) {
    if (files[file].url === xhr.responseURL) {
      var unit8 = new Uint8Array(xhr.response);
      var raw = String.fromCharCode.apply(null,unit8);
      var b64=btoa(raw);
      var dataURI="data:image/jpeg;base64,"+b64;
      files[file].data = dataURI;
  }
}
filesLoaded += 1;

//Only create pdf after all files have been loaded
if (filesLoaded == Object.keys(files).length) {
  showPDF();
  }
}

//Initiate xhr requests
for (var file in files) {
  files[file].xhr = new XMLHttpRequest();
  files[file].xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      loadedFile(this);
    }     
  };

  files[file].xhr.responseType = 'arraybuffer';
  files[file].xhr.open('GET', files[file].url);
  files[file].xhr.send(null); 
}

function showPDF() {
  doc.image(files.img1.data, 100, 200, {fit: [80, 80]});
  doc.end()
}

//IFFE that will download pdf on load
var saveData = (function () {
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  return function (blob, fileName) {
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  };
}());

stream.on('finish', function() {
  var blob = stream.toBlob('application/pdf');
  saveData(blob, 'aa.pdf');
});

我遇到的最大的问题是从arraybuffer键入包含base64数据的字符串。我希望这能有所帮助!

下面是js fiddle大部分xhr代码都来自这里。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26241650

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档