1

アップロードした画像をキャンバスに入れて操作したいです。

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-method で、画像をキャンバス内に保存する必要があります。

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 タグに入れることはできましたが、単純に描画することはできません。

何か案は？

4

4 に答える 4

1

drawImage 関数は、ファイルではなく img 要素を入力として受け取ります。

そのため、ファイルから img 要素を作成する必要があります (ただし、ドキュメントに追加する必要はありません)。画像の読み込みが完了すると (onload イベントがあります)、キャンバスに描画できます。

編集:ファイルの内容を画像 src として設定する前に、データ 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;
}
于 2012-09-23T14:58:09.617 に答える
-1

これを試して

function loadImage() {
            var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
            var img = new Image();
            img.src = 'imgs/test.png';
            img.onload = function(){
                ctx.drawImage(img, 200, 200, 300, 200); // x, y, width, height
            }
        }
于 2012-09-23T14:59:21.987 に答える