javascript - 有没有一种存储图像变量的捷径？

Question

我想找到一种将图像及其源存储在变量中的更短方法。

看起来像：

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

但对于：

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

这可以像第一个例子一样在一条干净的线上完成吗？

Answer 1

听起来您基本上是在询问Image构造函数是否可以接受 URL 作为参数。答案是不。当然，你可以写一个函数：

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

...然后使用它：

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

如果你想load在这些图像上使用事件，你的函数必须支持它，因为挂钩load返回Image是不可靠的。（有一个竞争条件，浏览器可以在设置load之后触发事件，src但在您挂钩事件之前 - 是的，即使 JavaScript 本身在浏览器上是单线程的。）可能看起来像这样：

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"}});

Answer 3

或者你可以简单地写var myImage = "<img src='../images/myImage.jpg'>";