修改已返回的对象答案

【问题标题】：Modifying an object that's been returned修改已返回的对象
【发布时间】：2014-12-29 07:39:37
【问题描述】：

编辑：感谢 Teemu 的回答，它帮助很大

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

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

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

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

【问题讨论】：

如果prerendered===true返回can而不是img?
嗯，但这只会从我认为的 onload 函数返回
请发挥您的想象力...您将从onload 中取出can 创建并将其放入if 块中。
@Teemu：我会说你有答案..写下来！

标签： javascript html image canvas scope

【解决方案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
};

【讨论】：

谢谢你，我的大脑已经被所有这些上下文和范围的东西弄糊涂了
@user3761179 这些是JS中非常重要的部分，值得学习和学习。顺便提一句。如果任何答案解决了您的问题，您可以通过勾选帖子左上角的复选标记来接受它。

【解决方案2】：

我相信您可以使用canvas.toDataURL 将画布转换回图像并更新源代码？

所以不是：

img = can;

也许：

img.src = can.toDataURL();

【讨论】：