Applying color effect to imported image from url

[RandomlyFish]

I want to apply a color filter on an image that have been imported from a url. The following code (excluding the addChild line) works if the image is already added inside the Container symbol on the stage, but it doesn't work if the image is imported.

var main = this;  
// Make the image a child of container  
main.Container.addChild(new createjs.Bitmap("http://www.freeiconspng.com/uploads/blue-star-ball-favorites-icon-png-0.png"));  
function SetColorRGB (_mc, _rgb, _saturation) {  
     if (_saturation == undefined) {  
          _saturation = 1;  
     }  
     var m = 1 - _saturation;  
     _mc.filters = [new createjs.ColorFilter(m, m, m, 1, _rgb[0] * _saturation, _rgb[1] * _saturation, _rgb[2] * _saturation, 0)];  
     _mc.cache(0, 0, _mc.nominalBounds.width, _mc.nominalBounds.height); // Update the pixels with the new color  
}  
 // Wait 3 seconds in case the image have to load  
setTimeout(ChangeColor, 3000);  
function ChangeColor () {  
     SetColorRGB(main.Container, [255, 0, 0], 0.5);  
     console.log("Color filter have been applied");  
}

[Colin Holgate]

You seem to be editing your post a few times. Can you give a secret message when you're ready for us to read?

Mostly teasing!

Would you be able to add an FLA, to save some copying and pasting, and setting up a test file?

[RandomlyFish]

The first time I posted it, I accidentally made it a suggestion, so I removed that and added it as a question instead.

Here you go: Color Test.zip - Google Drive

I added second container to show both an embedded and imported image, so the code have been changed slightly. And now that I have added the text inside container for the imported image, the image disappears, instead of nothing happening.

[Colin Holgate]

I have a webcam set up in your office, that's how I knew.

A quick look shows cross domain issues. Look at your browser console/errors.

I'll take a longer look now.

[RandomlyFish]

My console is empty, aside from the message that I make the code add once it have applied the color effects. The image also appears in the container.

You could try with a different image url if it still causes issues.

[Colin Holgate]

If you add the full url imported image to the embedded image you'll find that the filter doesn't work. If you add a local copy of the image to the embedded image, the filter does work, but the image gets cropped off, to the bounds of the embedded image.

Strange thing, possibly because one movieclip is a duplicate of the other. Go into the imported one and draw anything, so that the things you draw go down and right of where the image will load. Then the tinting works.

So, it's as if the tinting only works for the bounding box of the library symbol. If the symbol is empty it won't tint.

[RandomlyFish]

Actually, the reason why the image would disappear was because the nominal bounds wasn't updated with the added image, so I got an updated version that uses the width and height from the embedded image, and now nothing happens with the imported image, which was expected.

Color Test 2.zip - Google Drive

[ClayUUID]

Here's a working version. This code actually waits for the image to load before attempting to tint it, instead of just hoping that a fixed delay will be enough time. I also worked up a version that can replace the bitmap in a container, but that code is somewhat more complex.

var main = this;
// accepts movieclip to load image in, URL to load image from, load complete callback function (optional), and arguments to callback as an array (optional)
function loadImage(mc, url, callback, argsArray) {
    var newImage = document.createElement("img");
    newImage.onload = function() {
        mc.addChild(new createjs.Bitmap(newImage));
        !callback || callback.apply(this, argsArray);
    }
    newImage.src = url;
}
// accepts movieclip to tint, red, green, blue, saturation
function setTint(mc, r, g, b, sat) {
    var bounds = mc.getBounds();
    mc.filters = [new createjs.ColorFilter(1 - sat, 1 - sat, 1 - sat, 1, r * sat, g * sat, b * sat, 0)];
    mc.cache(bounds.x, bounds.y, bounds.width, bounds.height);
}
// call image-loading function, with callback to tint-setting function
loadImage(main.Container, "testimage.jpg", setTint, [main.Container, 255, 0, 0, 0.5]);

Or if you want to smash the entire thing into a single, very specialized function...

// accepts movieclip to load image in, URL to load image from, red, green, blue, saturation
function loadTintImage(mc, url, r, g, b, sat) {
    var newImage = document.createElement("img");
    newImage.onload = function() {
        mc.addChild(new createjs.Bitmap(newImage));
        var bounds = mc.getBounds();
        mc.filters = [new createjs.ColorFilter(1 - sat, 1 - sat, 1 - sat, 1, r * sat, g * sat, b * sat, 0)];
        mc.cache(bounds.x, bounds.y, bounds.width, bounds.height);
    }
    newImage.src = url;
}
// call image-loading-and-tinting function
loadTintImage(main.Container, "testimage.jpg", 255, 0, 0, 0.5);

[RandomlyFish]

Thank you for the code, though it doesn't work with an image from a url, only with a local file.

[ClayUUID · Accepted solution]

Of course that isn't going to work due to cross-domain security restrictions. But if the page is uploaded to a web server, and loading an image from the same domain, it should work fine.

[RandomlyFish]

Thanks, it works fine on the web server. I thought that wasn't the problem since the image would load and the console didn't say anything about it.

[ClayUUID]

Cross-domain security restrictions prevent the passing of data to scripts between domains. Loading an image is not passing data to a script. Running a color filter on an image IS.