0

このコードは、ユーザーのローカルコンピューターの画像をキャンバスに描画し、それを他のいくつかのキャンバスにスライドさせて、スライドパズルゲームを作成します。

function drawImage(event) {

        if (event.target.files.length <= 0) return;
        var files = event.target.files;
        var URL = window.URL || window.webkitURL;
        var img = $("#image")[0];

        img.src = URL.createObjectURL(files[0]);

        getCanvas("karajan").drawImage(img, 0, 0, img.width, img.height, 0, 0, 450, 450);

       ...........

    }

    function getCanvas(id) {
        var canvas = $("#" + id)[0];
        if (canvas.getContext) {
            return canvas.getContext("2d");
        }
        return undefined;
    }

ローカルコンピュータから画像ファイルを入力するタグ

<input type="file" accept="image/*" id="image_input" onchange="drawImage(event)"/>
<img id="image"/>

また、ユーザーが画像を変更したい場合、キャンバスは前の画像で描画します。どうしてか分かりません。drawImage関数の最初の行で、画像は新しい画像に変更され、キャンバスに描画されます

4

2 に答える 2

1

キャンバスはそれ自体をクリアしません。クリアするように指示する必要があります。を使用して、全体をワイプするか、制御された領域をワイプすることができますclearRect(x,y,w,h)。この後、新しい画像を描くことができます。

于 2013-01-21T16:23:06.963 に答える
1

現在のスクリプトが終了するまで、イメージは実際には「ロード」されないと思います。つまり、画像の読み込みイベントを聞いてから、それをキャンバスに描画する必要があります。

コードの再構築も行いました。すでにjQueryを利用できる場合は、それを使用してください。

$(function() {
    var URL = window.URL || window.webkitURL;
    var $image = $('#image').on('load', function() {
        // clear canvas here
        getCanvas("karajan")
            .drawImage(this, 0, 0, this.width, this.height, 0, 0, 450, 450);
        // ...
    });

    $('#image_input').on('change', function() {
        if (this.files.length === 0) return;

        $image.prop('src', URL.createObjectURL(this.files[0]));
    });
});

Kolinkが提案したように、それでもキャンバスをクリアする必要があります。それ以外の場合、新しい小さい画像が読み込まれると、以前の大きい画像の一部が引き続き表示されます。

于 2013-01-21T16:39:38.877 に答える