Изменение объекта, который был возвращен

Question

Edit: Спасибо Тиму за ответ это помогло

я не уверен, если вопрос поставлен совершенно правильно для моей проблемы ... В любом случае, я пытаюсь создать Функция getImage для использования в моей игре html5. Я хочу, чтобы API был спроектирован так, чтобы можно было дать аргумент логического prerender. У меня возникли проблемы с его внедрением, так что бит предварительной обработки может изменить возвращаемое изображение.

Код, который использует функцию выглядит следующим образом:

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

Answer 2

Я считаю, вы можете преобразовать холст обратно в изображение с помощью canvas.toDataURL & обновите источник?

Таким образом, вместо:

img = can; 

Возможно:

img.src = can.toDataURL();