html5-canvas：将图像文件转换为 DataURL 会引发 Uncaught TypeError答案

【问题标题】：html5-canvas: Conversion of Image file to DataURL throws Uncaught TypeErrorhtml5-canvas：将图像文件转换为 DataURL 会引发 Uncaught TypeError
【发布时间】：2015-10-08 19:42:18
【问题描述】：

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

未捕获的类型错误：无法执行“drawImage” 'CanvasRenderingContext2D'：提供的值不是类型 '(HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 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);

        }

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

【问题讨论】：

您需要将该 url 放在 img 标签的 src 上，然后将 img 传递给画布以在加载后进行绘制。

标签： javascript html canvas html5-canvas

【解决方案1】：

您不能将图像从 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 设置为用户选择的图像网址。加载图像后，我们将其添加到画布中。

编辑：

这里还有一个问题。无论图像大小是多少，由于静态画布宽度和高度，您将始终获得图像的 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]);

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

更新：

正如@Kaiido 提到的，它会生成 PNG 图像，因为 'image/jpg' 不是 mimetype。 'image/jpeg' 是 JPG 和 JPEG 图像的 mimetype。

更新小提琴：

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

【讨论】：

您的代码在小提琴上运行良好。但是，当我将其添加到
不需要 jquery。我将它添加到小提琴中以方便使用。你可以用普通的javascript本身来做到这一点。在您的代码中，只需将函数体替换为我的答案编辑部分中的最终代码即可。要查看结果，请转到您的浏览器控制台。
有效。感谢您抽出宝贵的时间！很有帮助！
获得toDataURL() JPEG 版本的正确参数是"image/jpeg"。一个 OP 和您的代码使用无效，将返回一个 png。

【解决方案2】：

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

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

}

【讨论】：

不需要等待加载事件？
对我来说结果是一个白色的正方形 300*300