11 Replies Latest reply on Aug 30, 2017 5:47 PM by ClayUUID

    Applying color effect to imported image from url

    RandomlyFish Level 3

      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");  
      }
      
        • 1. Re: Applying color effect to imported image from url
          Colin Holgate MVP & Adobe Community Professional

          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?

          • 2. Re: Applying color effect to imported image from url
            RandomlyFish Level 3

            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.

            • 3. Re: Applying color effect to imported image from url
              Colin Holgate MVP & Adobe Community Professional

              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.

              • 4. Re: Applying color effect to imported image from url
                RandomlyFish Level 3

                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.

                • 5. Re: Applying color effect to imported image from url
                  RandomlyFish Level 3

                  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

                  • 6. Re: Applying color effect to imported image from url
                    Colin Holgate MVP & Adobe Community Professional

                    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.

                    • 7. Re: Applying color effect to imported image from url
                      ClayUUID Adobe Community Professional

                      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);
                      
                      • 8. Re: Applying color effect to imported image from url
                        RandomlyFish Level 3

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

                        • 9. Re: Applying color effect to imported image from url
                          ClayUUID Adobe Community Professional

                          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.

                          • 10. Re: Applying color effect to imported image from url
                            RandomlyFish Level 3

                            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.

                            • 11. Re: Applying color effect to imported image from url
                              ClayUUID Adobe Community Professional

                              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.