如何通过javascript在HTML5画布中应用图像宽度

Question

Here is my script:

var img = new Image();
img.onload = function() {
    resourceCache[url] = img;
    readyCallbacks.forEach(function(func) {
         func();
    }
};

This script binds images into a canvas. I want to know how to set width for the image. I couldn't understand the meaning of readyCallbacks.forEach(function(func) { func(); }

Full code:

(function() {
var resourceCache = {};
var loading = [];
var readyCallbacks = [];

// Load an image url or an array of image urls
function load(urlOrArr) {
    if(urlOrArr instanceof Array) {
        urlOrArr.forEach(function(url) {
            _load(url);
        });
    }
    else {
        _load(urlOrArr);
    }
}

function _load(url) {
    if(resourceCache[url]) {
        return resourceCache[url];
    }
    else {
        var img = new Image();
        img.onload = function() {
            //img["width"] = "101";
            resourceCache[url] = img;

            if(isReady()) {
                readyCallbacks.forEach(function(func) {
                    func();
                });
            }
        };
        resourceCache[url] = false;
        img.src = url;
    }
}

function get(url) {
    return resourceCache[url];
}

function isReady() {
    var ready = true;
    for(var k in resourceCache) {
        if(resourceCache.hasOwnProperty(k) &&
           !resourceCache[k]) {
            ready = false;
        }
    }
    return ready;
}

function onReady(func) {
    readyCallbacks.push(func);
}

window.resources = { 
    load: load,
    get: get,
    onReady: onReady,
    isReady: isReady
};
})();

Answer 1

jsFiddle : https://jsfiddle.net/evq6ac0e/2/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();

//img.src = URL here;

img.onload = function() {
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,c.width,c.height);
  c.width = img.width;
  c.height = img.height;
  ctx.drawImage(img,0,0);
};

Just target your canvas and set the width and height to the image, if you just want to set the width then remove the line c.height = img.height; and vice-versa for height

Part 2

As far as explaining what readyCallbacks.forEach(function(func) { func(); } does: it simply iterates the array of functions and calls each function in the array. A callback function gets added to readyCallbacks each time onReady(func) is called.

The upshot of all this is that the code waits for all images to be loaded before calling all the functions registered via onRead(func)

jsFiddle (with comments added) : https://jsfiddle.net/CanvasCode/arkjge2o/

(function() {
  var resourceCache = {};
  var loading = [];
  var readyCallbacks = [];

  // Load an image url or an array of image urls
  function load(urlOrArr) {
    if (urlOrArr instanceof Array) {
      urlOrArr.forEach(function(url) {
        _load(url);
      });
    } else {
      _load(urlOrArr);
    }
  }

  function _load(url) {
    if (resourceCache[url]) {
      return resourceCache[url];
    } else {

      // Create a new img variable
      var img = new Image();
      img.onload = function() {
        // Store the new image object
        resourceCache[url] = img;

        // Check to see if all images are loaded
        if (isReady()) {
          // Calls all the callbacks in the array
          readyCallbacks.forEach(function(func) {
            func();
          });
        }
      };

      resourceCache[url] = false;

      // Start the image loading
      img.src = url;
    }
  }

  function get(url) {
    return resourceCache[url];
  }

  function isReady() {
    var ready = true;
    // For each image inside of resourceCache
    for (var k in resourceCache) {
    // See if any of the images is not an image
    // resourceCache.hasOwnProperty(k) will always return true
      if (/*resourceCache.hasOwnProperty(k) &&*/
        !resourceCache[k]) {
        ready = false;
      }
    }
    return ready;
  }

  function onReady(func) {
    readyCallbacks.push(func);
  }

  window.resources = {
    load: load,
    get: get,
    onReady: onReady,
    isReady: isReady
  };
})();

Answer 2

Try using dot syntax to set the dimensions of the image and adding px to the end of your value string, as in the example below:

 function _load(url) { if(resourceCache[url]) { return resourceCache[url]; } else { var img = new Image(); img.onload = function() { img.width = "101px"; resourceCache[url] = img; if(isReady()) { readyCallbacks.forEach(function(func) { func(); }); } }; resourceCache[url] = false; img.src = url; } }