在添加到jspdf-javascript之前，在循环中将图像转换为base64

Converting images to base64 within a loop before adding to jspdf - javascript

本文关键字：图像 转换 base64 循环 添加 jspdf-javascript 之前      更新时间：2023-09-26

我对base64转换和jspdf函数的问题进行了大量研究。（附言，这是我关于斯塔克弗洛的第一个问题，请揭露任何新手的错误）。

除了pdf是在图像转换为base64并放置到文档的循环完成之前生成和保存的之外，以下代码似乎都能很好地工作。我添加了几个提醒来检查时间。解决方案是在循环完成时检查图像，然后再继续使用pdf函数吗？如果是，怎么做？请帮忙。

$(document).ready(function(){
    $("a#getdoc").click(function(){
    var doc = new jsPDF('landscape, in, legal');
    var myimages = 'img1.jpg|img2.jpg|img3.png';
    var myimgarray = myimages.split('|');
    function convertImgToBase64(url, callback, outputFormat){
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL("image/jpeg");
        var dataURL = canvas.toDataURL("image/jpeg");
        callback(dataURL);
            canvas = null; 
    }
for(var i = 0; i < myimgarray.length; i++)
{
  icount.count = i;
  var img = new Image();
  alert(checkoutimgarray);
  img.src = '/Portals/0/repair-images/' + myimgarray[i];
  img.onload = function(){
      newData = convertImgToBase64(img);
      alert(newData);
      doc.addImage(newData, 'JPEG', (icount * 100), 10, 70, 15); // would doc be undefined here? out of scope?
  };
}
doc.setFontSize(20);
doc.text(100, 20, "This is a test to see if images will show");
doc.save('My_file.pdf');  
  });
});

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
function convertImgToBase64(img, outputFormat){
    // clear canvas
    canvas.width = img.width;
    canvas.height = img.height;
    // draw image
    ctx.drawImage(img, 0, 0);
    // get data url of output format or defaults to jpeg if not set
    return canvas.toDataURL("image/" + (outputFormat || "jpeg"));
}
var images = [];
for(var i = 0; i < myimgarray.length; i++) {        
      var img = new Image();
      img.onload = function() {
          images.push({
              base64: convertImgToBase64(this),
              width: this.width,
              height: this.height
          });
          // all images loaded
          if(images.length === myimgarray.length) {
              for(var j = 0; j < images.length; j++) {             
                  doc.addImage(images[j].base64, 'JPEG', (j * 100), 10, 70, 15);
              }    
              doc.setFontSize(20);
              doc.text(100, 20, "This is a test to see if images will show");
              doc.save('My_file.pdf');
          }
      };
      img.src = '/Portals/0/repair-images/' + myimgarray[i];
}
相关文章：