Access images within the library

[thomasw72287590]

I need to be able to access the actual image from the library so I can do this:

function drawShape() {

    console.log('draw shape');

    overlay = new createjs.Shape();

    stage.addChild(overlay);

    overlay.graphics.clear()

        .beginBitmapFill(img)

        .drawRect(0,0,800,600);

  overlay.cache(0, 0, self.canvas.width, self.canvas.height);

}

var img = new Image();

img.onload = drawShape;

img.src = "test.png";

Do anyone know how to grab the image from either the library directly or from an MC holding the image?
Just to be clear I need to the actual image file so I can manipulate it directly. Simply loading an MC containing the image or loading the image via linkage will not work. Not unless I can use either of those to grab the image.

[ClayUUID · Accepted solution]

I think this may do what you want:

In the library, give the bitmap a linkage name (double-click in the Linkage column next to the bitmap's name).

var myImage= new Image();

myImage.onload = drawShape;

myImage.src = img.myTestLinkageName.src;

DO NOT create any variables named "img". That name is used by CreateJS to hold the collection of all loaded bitmaps.

[thomasw72287590]

Good point about my naming. Thanks.
img.myTestLinkageName.src returns Cannot read property 'src' of undefined

and I think Im calling everything correctly:

[ClayUUID]

I just tested using the exact code you posted, and it worked fine. Are you sure you haven't overwritten img anywhere else in your code? Try doing a console.log(img);

[thomasw72287590]

I dont see any other img variables I have created and the console output looks like an atlas object:

---- edit ----

I see the issue, Im using spriteSheets. As soon as I disable spriteSheets, everything seems ok. But how to do this with spriteSheets?

[ClayUUID]

Ugh, spritesheets. I never use them because of all the problems they cause, but maybe this would work. Try:

var myImage = new lib.spot_0_0;

Then pass myImage directly to beginBitmapFill.

[thomasw72287590]

Tried that before. It seems spriteSheets really complicate the issue.

[ClayUUID]

This may be overkill, but it works whether or not spritesheets are enabled. Copies the image to a secondary canvas, then uses that canvas as the fill pattern.

var imgLib = new lib.spot_0_0;

var imgBounds = imgLib.getBounds();

imgLib.cache(imgBounds.x, imgBounds.y, imgBounds.width, imgBounds.height);

var myImage = imgLib.cacheCanvas;

drawShape();

[thomasw72287590]

I'll give it a try tomorrow. Thanks for the help on this