修改一個已經返回

編輯的對象：感謝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()};

但這似乎是醜陋的，我認爲有一個更好的解決方案

來源

2014-12-29 Matt

如果'prerendered === true'返回'can'而不是'img'？ – Teemu

嗯，但這隻會從onload函數返回我認爲 – Matt

請使用你的想象力......你會從'onload'中取出'can'並將其放入'if'塊。 – Teemu

如果我理解你的問題正確，要返回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 
};

來源

2014-12-29 09:57:45 Teemu

謝謝你，我的大腦剛剛變成糊狀，所有這些情況和範圍東西 – Matt

@ user3761179這些是JS的一個非常重要的部分，他們值得學習和學習。順便說一句。如果任何答案解決了您的問題，您可以通過勾選帖子左上角的複選標記來接受它。 – Teemu

我相信你可以將畫布轉換回圖像使用canvas.toDataURL &更新源代碼？

所以不是：

img = can;

也許：

img.src = can.toDataURL();

來源

2014-12-29 08:19:10 loxxy

修改一個已經返回

回答

相關問題