HTML and CSS Reference
In-Depth Information
{
fetch_ctx.clearRect(0,0,128,128);
fetch_ctx.drawImage(imgObject, 0, 0);
var last = Date.now();
//CLM note this keeps an additional in-memory copy
var imgDat = fetch_ctx.getImageData(0,0, imgwidth, imgheight);
var current = Date.now();
var delta = (current - last)
console.log("getImageData " + delta + "ms");
return imgDat;
}
■
For some odd security reason, you aren't able to use
getImageData
to fetch the pixels for an image file that
isn't being served off the same origin as the code. as such, if you try the code in Listing 5-10 by simply loading your file
in a browser, it will fail. You need to serve the code from some simple web server and browse to it appropriately. the
pixel-perfect picking example in the source code comes supplied with a simple python script to create a web server to
load the example from. For more information on this type of thing, try searching for “same Origin policy getimageData.”
Note
This allows you to transfer a smaller asset footprint, keep using your PNGs/ GIFs or whatever other compression
footprint you want, and still get the RGBA data available in main memory during load time (see Listing 5-11).
Listing 5-11.
Updating the SpriteProto definition to handle pixel data
function SpriteProto(){
this.filename="";
this.imgHandle=null;
this.imgData=null;
this.size={w:0,h:0};
this.load= function(filename,w,h)
{
var targetSpriteProto = this;
this.size.w = w;
this.size.h = h;
var img = new Image();
img.onload = function(){
targetSpriteProto.imgHandle = img;
targetSpriteProto.imgData = fetchImageData(targetSpriteProto.imgHandle,w,h);
}
img.src = filename;
}
}
Testing a Mouse Click
Now that you have your per-sprite image data, as well as in-game instances of
referencing
that data, you can continue
with the process of determining which of those objects intersect a given point on the screen, taking into account pixel
transparency.
