web-dev-qa-db-ja.com

CanvasでHTML5 File APIから画像を描画するにはどうすればよいですか？

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>
javascripthtml5-canvasfileapidrawimage
46
Jonas

イメージではないFileインスタンスがあります。

Fileの内容を取得するには、FileReaderを使用します。次に、内容をImageインスタンスに渡します。これは、キャンバスに描画できます： http://jsfiddle.net/t7mv6/ 。

画像を取得するには、new Image()を使用します。 srcは、選択したFileを参照するURLである必要があります。 _URL.createObjectURL_を使用して、Blobを参照するURLを取得できます（FileはBlobでもあります）： 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を無効にしてください。そうしないと、メモリリークが発生します。あまりにもクレイジーなことをしていない場合は、_img.onload_関数にURL.revokeObjectURL(img.src)を貼り付けることができます。

参照：

73
pimvdb

実例

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.createObjectUrldocs

代わりにFileReaderを使用してオブジェクトURLを作成することもできます。

FileReader は、ブラウザのサポートがわずかに優れています。

FileReaderアプローチはFF6/Chromeで機能します。ただし、Img.srcをBlobに設定することが有効であり、クロスブラウザであるかどうかはわかりません。

オブジェクトURLを作成するのが正しい方法です。

編集：

コメントwindow.URLで述べたように、オフラインでのサポートはFF6/Chromeでは利用できないようです。

12
Raynos

これは 完全な例（フィドル）FileReaderを使用したものです（Raynosが述べたように、ブラウザのサポートが向上しています）。この例では、画像に合わせてCanvasも拡大縮小します。

実際の例では、フォームが爆発しないように画像を最大に拡大するかもしれません;-)。 スケーリング（フィドル）の例 です。

3
Nux