html5-canvas：将图像文件转换为 DataURL 会引发未捕获的类型错误

Question

我正在尝试获取 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)'

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:

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);

        }

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

Answer 1

您正在尝试将对象 URL 绘制到 canvas。你需要先在内存中创建一个图像

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

}

Answer 2

您不能将 url 中的图像直接绘制到 canvas。你必须创建一个图像 element/object 才能做到这一点。

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。加载图像后，我们将其添加到 canvas.

编辑：

这里我们还有一个问题。无论图像大小如何，由于静态 canvas 宽度和高度，您将始终获得图像的 300x300 裁剪数据url。所以我们可以在图片加载后动态设置宽度和高度为canvas。我们可以使用 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]);

这是fiddle（我把canvas设为可见，这样你就可以在canvas中看到整个图像和宽度和高度的变化）：

更新：

如@Kaiido 所述，它将生成 PNG 图像，因为 'image/jpg' 不是 mimetype。 'image/jpeg' 是 JPG 和 JPEG 图像的 mimetype。

已更新Fiddle：

http://jsfiddle.net/k7moorthi/r8soo95p/4/

html5-canvas：将图像文件转换为 DataURL 会引发未捕获的类型错误

html5-canvas: Conversion of Image file to DataURL throws Uncaught TypeError

html

javascript

canvas

html5-canvas