jsPDF addImage 不起作用

Question

我正在使用 jsPDF 通过循环一些 HTML 代码来查找它需要的值来创建 PDF。我能够很好地获取这些值，但是当我尝试插入

header_img

时，它不起作用。我在 Google 上找到了很多解决方案，但我现在正在使用的解决方案是唯一一个不会引发错误的解决方案。

这是用于获取通过循环提供的 url，将其转换为 DataURL，然后将图像插入 PDF 的代码。它没有给我任何错误，但 PDF 中只有黑色边框，没有图像。有什么想法吗？

function getDataUri(url, cb) {
	var image = new Image();
	image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

	image.onload = function () {
		console.log(url);
		var canvas = document.createElement('canvas');
		canvas.width = this.naturalWidth;
		canvas.height = this.naturalHeight; 

		//next three lines for white background in case png has a transparent background
		var ctx = canvas.getContext('2d');
		ctx.fillStyle = '#fff';  /// set white fill style
		ctx.fillRect(0, 0, canvas.width, canvas.height);

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

		cb(canvas.toDataURL('image/jpeg'));
	};

	image.src = url;
}

var pdf = new jsPDF('p', 'in', 'letter');
	

var left_margin = .5;
var top_margin =.5;
var height = 2.313;
var width = 3.25;
var header_img_height = 1;

//Draw border
pdf.setLineWidth(1/92);
pdf.setDrawColor(0, 0, 0);
pdf.rect(left_margin, top_margin, width, height);
	
//example image
var header_img = 'http://www.quotehd.com/imagequotes/authors24/jeff-olsen-quote-two-clicks-and-its-broke.jpg';
	
let logo = null;

//callback to get DataURL
getDataUri(header_img, function(dataUri) {
	logo = dataUri;
	console.log("logo=" + logo);
	
  //Add image to PDF
	pdf.addImage(logo, 'JPEG', left_margin, top_margin, header_img_height, width);
});

pdf.output('save', 'test.pdf');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我最终通过编写一个将图像转换为 Base64 的 PHP 脚本解决了这个问题。

$img_src = urldecode($_GET['url']);
$img_str = base64_encode(file_get_contents($img_src));
echo 'data:' . getimagesize($img_src)['mime'] . ';base64,' . $img_str;

然后使用 jQuery，我将 url 传递给 PHP 脚本并获取返回的 Base64 数据：

function getBase64(url) {

    var out = '';
    $.ajax({
        url: 'get-dataurl.php?url=' + encodeURI(url),
        async: false,
        dataTye: 'text',
        success: function(data) {
            out = data;
        }
  });
    return out;
}

当然不理想，但它有效。

Answer 2

您可以将图像编码为base64，您可以使用此工具或任何类似工具并将其替换为您的代码。

Answer 3

经过几个小时的尝试找出为什么我无法在 PDF 中显示简单图像后，我终于找到了解决方案。

var doc = new jsPDF();
var img = new Image;
    img.src = "my-image.png";
    img.onload = function() {
        doc.addImage(img, 'PNG', 10, 10);
        doc.output('dataurlnewwindow');
    };

所以这里有两个技巧，第一个是我应该等待图像加载，然后才将其添加到 PDF。我在其他几个地方也发现了这个。然而，最终的解决方案是使用相同的 onload 方法输出或保存 PDF。如果您尝试在 onload 方法之外保存或输出 pdf，您的图像将不会添加到 PDF 中。