Javascript html5-canvas：将图像文件转换为 DataURL 会引发未捕获的类型错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33024630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5-canvas: Conversion of Image file to DataURL throws Uncaught TypeError
提问by Dinuka Jay
I'm trying to get the Base64/Data URL of a chosen image file in Javascript. The user basically selects an image via the File Input control and the Data URL is generated. However, I get this error:
我正在尝试使用 Javascript 获取所选图像文件的 Base64/Data URL。用户基本上通过文件输入控件选择图像并生成数据 URL。但是，我收到此错误：
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是“（HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap）”类型
HTML:
HTML：
<body>
<form id="form1">
<div>
<input type="file" id="imageinput" onchange="testit(event)" />
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>
</div>
</form>
</body>
Javascript:
Javascript：
function testit(event) {
var myImage = URL.createObjectURL(event.target.files[0]);
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(myImage, 0, 0);
var mydataURL = myCanvas.toDataURL('image/jpg');
alert(mydataURL);
}
Why isn't this code working, guys?
伙计们，为什么这段代码不起作用？
采纳答案by Kesavamoorthi
You can not draw an image from url directly to canvas. You have to create a image element/object to do that.
您不能将图像从 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]);
Here we have created a imageobject and set the srcto user selected image url. After the image is loaded we are adding it to the canvas.
在这里，我们创建了一个image对象并将其设置src为用户选择的图像 url。加载图像后，我们将其添加到画布中。
EDIT:
编辑：
Here we have one more problem. Whatever the image size is, you will always get 300x300 cropped dataurl of the image because of the static canvas width and height. So we can set the width and height to the canvas dynamically after the image loaded. We can use console.log()instead of alert()so that you can open and see the image from your console in your browser itself.
这里我们还有一个问题。无论图像大小是多少，由于静态画布宽度和高度，您将始终获得 300x300 的图像裁剪数据 URL。所以我们可以在图片加载后动态设置画布的宽高。我们可以使用console.log()代替，alert()以便您可以在浏览器本身的控制台中打开并查看图像。
myCanvas.width = img.width;
myCanvas.height = img.height;
Here is the final code:
这是最终的代码：
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]);
Here is the fiddle (i have made the canvas visible so that you can see the whole image and width and height change in canvas):
这是小提琴（我使画布可见，以便您可以看到画布中的整个图像以及宽度和高度的变化）：
UPDATE:
更新：
As @Kaiido mentioned, It will produce PNG image since the 'image/jpg' is not the mimetype. 'image/jpeg' is the mimetype for both JPG and JPEG images.
正如@Kaiido 所提到的，它会生成 PNG 图像，因为 'image/jpg' 不是 mimetype。'image/jpeg' 是 JPG 和 JPEG 图像的 mimetype。
Updated Fiddle:
更新的小提琴：
回答by dave.mcalpine
You're trying to draw an object URL to the canvas. you need to create an image in memory first
您正在尝试将对象 URL 绘制到画布。你需要先在内存中创建一个图像
http://jsfiddle.net/zmtu6t6c/4/
http://jsfiddle.net/zmtu6t6c/4/
var myImageUrl = URL.createObjectURL(event.target.files[0]);
var myImage = new Image();
myImage.src = myImageUrl;
myImage.onload = function(){
... then do the canvas stuff
}
