无法将图像加载到 Canvas 并获取该图像的 base64 编码

Question

我正在尝试使用 jspdf 插件从 HTML 生成 PDF。我坚持将图像加载到 PDF 中。插件中有一个函数 addImage() 对图像进行base64编码，但是将图像转换为base64不起作用。

我用过以下两种方式

//创建画布，在上下文中绘制图像并获取数据url

imgToDataURL =  function (img, outputFormat){
        var canvas = document.createElement('canvas');
        canvas.width = 20;
        canvas.height = 20;
        var c = canvas.getContext('2d');
        c.height = img.height;
        c.width=img.width;
        c.drawImage(img, 0, 0);
        c.save();
        var dataurl = canvas.toDataURL(outputFormat);
        return dataurl;

    }

var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = "image path"
img.height= 60;
img.width=60;
var dataURL = this.imgToDataURL(img,"image/jpeg");
renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);

这是打印错误的 dataURL 我得到一个白色的图像。如果我对 base64 代码进行硬编码，即返回一个硬编码的 dataURL，那么 addImage 可以正常工作。所以问题出在 canvas.toDataURL 给我错误的输出

这是第二种方式

convertImgToBase64URL =  function (url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

this.convertImgToBase64URL("Image Path",function(base64){

    renderer.pdf.addImage(base64, 'PNG', 20, 20,48,48);
})

我已经在 javascript 中运行了它，并且 onload 函数甚至没有运行我不确定我的错误是什么。

请告诉我我在这两种方式中犯了什么错误

Answer 1

在第一次您错过了为您的图像分配加载功能。因此，当您尝试创建 dataURL 时，图像可能尚未加载，因此，空白图像。您可以尝试将最后几行更改为：

...
img.width=60;
img.onload = function () {
  var dataURL = this.imgToDataURL(img,"image/jpeg");
  renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);
}
img.src = "image path";

至于第二个，convertImgToBase64URL() 似乎有问题，它接受 3 个参数，但您传递的是 2。在您的示例中，outputFormat 参数是 undefined。