javascript - 将图像添加到 PDF 时不显示图像

Question

我正在尝试使用图像创建 PDF。我有如下图片的 URL:

var url = "https://firebasestorage.googleapis.com/v0/b/dicom-poc.appspot.com/o/images%2FNiouCzjBYna8Wx1VO2x3UST5tDc2%2F2020-10-07%2F05%3A03%3A58%2Fvisualization%2FL -CC.png?alt=media&token=dce8859a-3427-432b-8176-590e9569aad9"

我的代码在这里:

var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
   canvas.height = img.height;
   canvas.width = img.width;
   var dataURL = canvas.toDataURL('image/png')
   var base64 = dataURL.replace(/^data:.+;base64,/, '');  
   pdf.text("Hi");
   pdf.addImage(base64,'PNG',5,5,50,50);
   pdf.save("download.pdf");
}

运行上述代码后，PDF 已成功下载，文本为 "Hi"，但图像不存在。我尝试了人们建议的多种解决方案，但没有结果。你能指导我做同样的事情吗？

提前致谢!

Answer 1

你没有在 Canvas 上画任何东西。

var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
   canvas.height = img.height;
   canvas.width = img.width;
   ctx.drawImage(img, img.width, img.width);
   var dataURL = canvas.toDataURL('image/png')
   var base64 = dataURL.replace(/^data:.+;base64,/, '');  
   pdf.text("Hi");
   pdf.addImage(base64,'PNG',5,5,50,50);
   pdf.save("download.pdf");
}