Applying color effect to imported image from url

Question

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");  
}

ClayUUID · Accepted Answer

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.

ClayUUID · Answer

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);

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.