javascript - 修改返回的对象

Question

编辑:感谢 Teemu 的回答，它很有帮助

我不确定这个问题的措辞是否完全正确地解决了我的问题...无论如何，我正在尝试创建一个 getImage 函数以在我的 html5 游戏中使用。我希望 API 的设计能够给出 bool 预渲染参数。我在实现它时遇到问题，以便预渲染位可以修改返回的图像。

使用该函数的代码如下所示:

var resources = {
    image: getImage('path/to/my/image.png'),
    prerendered: getImage('my/prerendered/image.png', true)
};

getImage 函数的代码如下所示:

var getImage = function (source, prerender) {
    var img = new Image(); // store as empty image

    img.onload = function () {
        if (prerender) { // all my prerendering code
            var can = document.createElement('canvas');
            var ctx = can.getContext('2d');

            can.width = img.width;
            can.height = img.height;

            ctx.drawImage(img, img.width, img.height);

            // right here is where I attempt to modify img
            // but since it's already been returned, I'm not changing the returned value - I think
            img = can;
        }

        img.ready = true; // a property my game uses to check if the resource is ready
    };

    img.src = source; // load that badboy

    return img;
};

我尝试的一个解决方案是将 img 包装在一个对象中，并将其作为一个属性，例如

 var wrapper = {img: new Image()};

但这看起来很难看，我认为有更好的解决方案

Answer 1

如果我正确理解你的问题，你想返回 canvas而不是img如果是 prerender是 true 。如果是这样，您可以这样做:

var getImage = function (source, prerender) {
    var img = new Image(),
        can, ctx;
    img.onload = function () {
        if (prerender) {
            // prerender, can & ctx are defined in the outer scope
            // img still refers to the originally-created image, hence this will work
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, img.width, img.height);
        }
        img.ready = true;
    };
    if (prerender) {
        can = document.createElement('canvas');
        ctx = can.getContext('2d');
    }
    img.src = source;

    return can || img; // returns can if it's defined, img otherwise
};