无法使用jspdf将图片添加到pdf中。返回getJpegSize错误。

Question

我遇到了在jspdf中添加图片的问题。错误信息如下： Error: getJpegSize could not find the size of the image 以下是代码：

$scope.makePDF = function () {
    var imgData = 'data:image/jpeg;base64,' + btoa('../img/myImage.jpg');
    var doc = new jsPDF();
    doc.setFontSize(12);
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

- Jason Parker

---

仅供参考：btoa() 不支持旧版浏览器和大多数 IE。 - ArtOfCode

Answer 1

这里的问题在于您没有加载图像数据。"btoa"从'../img/myImage.jpeg'创建一个Base64编码的ASCII字符串。

要获取图像数据，您需要从画布或物理图像创建图像数据。

更改：

var doc = new jsPDF();
doc.setFontSize(12);
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

To

var img = new Image(),
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

img.onload = function () {
    ctx.drawImage(img, 0, 0 );
    var imgData = canvas.toDataURL('image/jpeg');
    var doc = new jsPDF();
    doc.setFontSize(12);
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
}

img.src = '../img/myImage.jpg';

我希望这有所帮助。

- Samir

Answer 2

我曾经遇到过同样的错误，但现在已经解决了。我不认为我的问题和Jason的一样，但或许我的解决方法可以帮助其他遇到类似问题的人。我的问题是由于我在以下代码中指定了'img'而非'image'导致的：

var imgData = canvas.toDataURL("img/jpeg", 1.0);

这需要我进行一些尝试和错误才能弄清楚，因为控制台没有抱怨"img"，而我习惯在其他情况下将图像缩写为img，所以我一定是打错了。同样，你还需要确保指定的是jpeg而不是jpg。

- msoltys