Javascript html5画布：将图像文件转换为DataURL会引发未捕获的TypeError

我试图用Javascript获取所选图像文件的Base64/Data URL。用户基本上通过文件输入控件选择图像，并生成数据URL。但是，我得到了这个错误：

未捕获的TypeError:无法在上执行“drawImage” “CanvasRenderingContext2D”：提供的值不是类型 '（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或 图像位图）'

HTML:

---

为什么这段代码不起作用，伙计们？

您正试图在画布上绘制一个对象URL。您需要先在内存中创建一个映像

---

您不能将图像从url直接绘制到画布。您必须创建一个图像元素/对象才能做到这一点

var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    alert(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

在这里，我们创建了一个

image

对象，并将

src

设置为用户选择的图像url。加载图像后，我们将其添加到画布

编辑：

我们还有一个问题。无论图像大小如何，由于静态画布的宽度和高度，您将始终获得图像的300x300裁剪数据URL。因此，我们可以在加载图像后动态设置画布的宽度和高度。我们可以使用

console.log（）

而不是

alert（）

，这样您就可以在浏览器中打开并查看控制台中的图像

myCanvas.width = img.width;
myCanvas.height = img.height;

以下是最终代码：

var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    myCanvas.width = img.width;
    myCanvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    console.log(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

这是小提琴（我已经使画布可见，以便您可以看到整个图像以及画布中的宽度和高度变化）：

更新：

正如@kaido提到的，它将生成PNG图像，因为“image/jpg”不是mimetypeimage/jpeg'是JPG和jpeg图像的mimetype

更新小提琴：

---

加载后，您需要将该url放在img标记的src上，然后将img传递到画布进行绘制。不需要等待加载事件吗？对我来说，结果是一个白色正方形300*300。您的代码在fiddle上运行良好。但是，当我将它添加到标记内的标题时，我没有得到任何结果。也没有警报。也没有错误。我包括了不需要jquery的代码。为了便于使用，我把它放在小提琴上。您可以使用普通javascript本身来实现这一点。在您的代码中，只需在我的答案的编辑部分用最终代码替换函数体。要查看结果，请转到浏览器控制台.Works。谢谢你抽出时间，伙计！非常有帮助！获取JPEG版本的

toDataURL（）

的正确参数是

“image/JPEG”

。一个OP和您的代码使用无效，将返回png。

var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    alert(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

myCanvas.width = img.width;
myCanvas.height = img.height;

var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    myCanvas.width = img.width;
    myCanvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    console.log(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);