60

我想在画布上绘制使用 HTML5 File API 打开的图像。

在该handleFiles(e)方法中，我可以使用 访问文件，e.target.files[0]但无法直接使用drawImage. 如何从 HTML5 画布上的 File API 绘制图像？

这是我使用的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles);
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(e.target.files[0], 20,20);
    alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>
4

3 回答 3

90

您有一个File不是图像的实例。

要获取图像，请使用new Image(). 需要是src引用所选File. 您可以使用URL.createObjectURL来获取引用 a Blob（aFile也是 a Blob）的 URL：http: //jsfiddle.net/t7mv6/86/。

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 20,20);
    alert('the image is drawn');
}
img.src = URL.createObjectURL(e.target.files[0]);

注意：请务必在完成后撤销对象 url，否则会泄漏内存。如果你没有做任何太疯狂的事情，你可以URL.revokeObjectURL(img.src)在img.onload函数中加入 a 。

参考：

于 2011-07-21T12:29:03.017 回答
14

现场示例

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 20, 20);    
    }
    img.src = url;   
}

window.URL.createObjectUrl文档

您也可以使用FileReader来创建对象 URL。

FileReader具有稍微更好的浏览器支持。

该FileReader方法适用于 FF6 / Chrome。我不确定设置Img.src为 aBlob是否有效且跨浏览器。

创建对象 url 是正确的方法。

编辑：

正如评论支持中提到的window.URL，离线似乎在 FF6/Chrome 中不可用。

于 2011-07-21T12:29:43.273 回答
4

这是一个使用（Raynos 提到的更好的浏览器支持）的完整示例（Fiddle ）。FileReader在此示例中，我还缩放 Canvas 以适合图像。

在现实生活中的示例中，您可能会将图像缩放到某个最大值，这样您的表单就不会爆炸；-)。这是一个缩放（小提琴）的例子。

var URL = window.webkitURL || window.URL;

window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles, false);
    
    // set original canvas dimensions as max
    var canvas = document.getElementById('canvas');
    canvas.dataMaxWidth = canvas.width;
    canvas.dataMaxHeight = canvas.height;
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var reader  = new FileReader();
    var file = e.target.files[0];
    // load to image to get it's width/height
    var img = new Image();
    img.onload = function() {
        // setup scaled dimensions
        var scaled = getScaledDim(img, ctx.canvas.dataMaxWidth, ctx.canvas.dataMaxHeight);
        // scale canvas to image
        ctx.canvas.width = scaled.width;
        ctx.canvas.height = scaled.height;
        // draw image
        ctx.drawImage(img, 0, 0
            , ctx.canvas.width, ctx.canvas.height
        );
    }
    // this is to setup loading the image
    reader.onloadend = function () {
        img.src = reader.result;
    }
    // this is to read the file
    reader.readAsDataURL(file);
}

// returns scaled dimensions object
function getScaledDim(img, maxWidth, maxHeight) {
    var scaled = {
        ratio: img.width / img.height,
        width: img.width,
        height: img.height
    }
    if (scaled.width > maxWidth) {
        scaled.width = maxWidth;
        scaled.height = scaled.width / scaled.ratio;
    }
    if (scaled.height > maxHeight) {
        scaled.height = maxHeight;
        scaled.width = scaled.height / scaled.ratio;
    }
    return scaled;
}
canvas {
    border:1px solid black
}
<input type="file" id="input"/>
<div>
    <canvas width="400" height="300" id="canvas"/>
</div>

于 2015-10-13T21:05:06.557 回答