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

我正在尝试使用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);

这是打印错误的数据URL我得到一个白色图像。如果我硬编码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函数甚至没有运行，我不确定我的错误是什么

---

请告诉我在这两方面我都犯了什么错误

第一次你没有给你的图像分配一个onload函数。因此，当您尝试创建DATAOL时，图像可能尚未加载，EGO，空白图像。您可以尝试将最后几行更改为：

...
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

在将图像绘制到画布上下文之前，必须等待图像加载。另外，您确定为图像提供了正确的跨原点标题吗？如果您的服务器设置不正确，则

“匿名”

请求将被阻止，您的图像将永远无法加载。除此之外，在您的第一个代码段中没有什么问题（即context2d没有宽度和高度属性，并且

save（）

在这里是无用的），但没有任何问题应该阻止您的代码。是的，但我不确定如何检查图像是否已加载。对于少数图像，我确实会遇到以下异常：“源站的图像‘图像服务器路径’已被跨源站资源共享策略阻止加载：请求的资源上不存在‘访问控制允许源站’标头。因此不允许访问源站‘空’。”那么这到底是什么意思呢。我是javascript/HTML和所有这些东西的新手，如果我问了任何明显的问题，我很抱歉。你很幸运，我只是为这些完全相同的情况编写了这些问题和答案（在这种情况下，你不是唯一一个）：@kaido我编写了一个类似的问题，但不幸的是img.onload从未执行。我不知道如何设置访问控制\u Allow-Origin“头。需要注意的一点是，我在一个JS文件中编写所有内容，并在HTML中添加此文件。加载图像会有问题吗？@kaido我现在可以获取图像，但我使用的是chrome的CORS扩展，并在那里启用了跨源资源共享。如果我在那里禁用，则不会加载图像。你能帮我解决这个问题吗。我正在访问的图像位于服务器的公用文件夹中，我可以从web浏览器访问图像。您可以调用

canvas.toDataURL（未定义）

或任何其他无效值，它将返回默认值

'image/png'

，我尝试在第一个文件中包含img.onload，但onload函数从未执行。我对knwo的数据URL保持了一个警报声明，但我从未得到过那个警报。需要注意的是，所有的处理都在一个JS文件中进行。我正在从其他函数传递图像源链接和高度宽度，并调用imgtodatarol函数，获取dataURL链接。