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'>";

存储图像变量有一个简短的方法吗？

3 个答案: