javascript - 画像変数を保存する簡単な方法はありますか?

Question

画像とそのソースを変数に格納するより短い方法を見つけたいと思います。

次のようになります。

ctx = document.getElementById("canvas").getContext('2d');

しかし、次の場合:

var img = new Image();
img.src = "image.png";

最初の例のように、これを 1 行で行うことはできますか?

Answer 1

Image基本的に、コンストラクターがURLを引数として受け入れることができるかどうかを尋ねているようです。答えはいいえだ。もちろん、次の関数を書くことができます。

function createImage(src) {
    var img = new Image();
    img.src = src;
    return img;
}

...そしてそれを使用します：

var img = createImage("image.png");

これらの画像でイベントを使用したい場合は、返されたloadものをフックすることは信頼できないため、関数はそれをサポートする必要があります。（競合状態があります。ブラウザは、設定後、イベントをフックする前にイベントを発生させることができます—はい、JavaScript自体はブラウザでシングルスレッドですが。）これは次のようになります。loadImageloadsrc

function createImage(src, loadHandler) {
    var img = new Image();
    if (loadHandler) {
        img.load = loadHandler;
    }
    img.src = src;
    return img;
}

...そしてそれを使用します：

var img = createImage("image.png");             // No `load` handler
// or
var img = createImage("image.png", handler);    // Using a `load` handler
// or
var img = createImage("image.png", function() { // Using an inline `load` handler
    // ...the image loaded...
});

Answer 2

の代わりにObject.createを使用してオブジェクトを新規作成することもnewできます。

var img = Object.create(Image.prototype, {src: {value: "image.png"}});