javascript - 将原始图像绘制到 Canvas 中

Question

我想将上传的图像放入 Canvas 中并使用它。

HTML:

<h2>Upload:</h2>
<input type="file" id="take-picture" accept="image/*">

<h2>Preview:</h2>
<p>
    <canvas id="show-picture" style="background-color: aqua; height: 100px; width: 100px;" />
</p>

这是我的 JavaScript，用于处理上传后的图片:

    takePicture.onchange = function (event) {
        var files = event.target.files,
            file;
        if (files && files.length > 0) {
            file = files[0];
            processImage(file);
        }
    };

现在在 processImage 方法中，图片应该存储在 Canvas 中。

function processImage(file) {
    // showImage(showPicture, file); //loading into a regular img-tag

    var canvas = document.getElementById('show-picture');
    var context = canvas.getContext('2d');
    context.drawImage(file, 100, 100);
}

我能够将此文件放入 img 标签中，但我不能简单地绘制它。

有什么想法吗？

Answer 1

drawImage 函数将 img 元素作为输入，而不是文件。

因此您需要从文件创建一个 img 元素(但不需要将其附加到文档中)。当图像完成加载(有一个 onload 事件)时，您可以将其绘制在 Canvas 上。

编辑:在将文件设置为图像源之前，您还需要读取文件内容作为数据 URL。

var reader = new FileReader();
reader.readAsDataUrl(file)
reader.onload = function(e) {
    var img = new Image();
    img.onload = function() {
       context.drawImage(img, 100,100)
    }
    img.src = e.target.result;
}