How to overlay non-transparent part of Bitmap with a color in Easeljs/Createjs?

问题

I have an PNG image that has some transparent portion. Now I want to apply a color overlay to the non-transparent part of the image while keeping the transparent portion intact.

If I use the ColorFilter it fills the whole bitmap. I've also tried the AlphaMaskFilter (using the same PNG as source) but it doesn't work either. The whole bitmap is always filled with color.

Any other suggestions on how to do it?

回答1:

You would have to write a filter that either:

• works like AlphaMaskFilter, only using a rect() and source-out compositeOperation OR
• works like AlphaMapFilter, but instead draw a colored pixel where it encountered empty pixels in the source image.

Here is a sample plugin using the first approach above, which is probably the most efficient:

(function () {
    "use strict";
    function ColorMaskFilter(color) {
        this.color = color;
    }
    var p = createjs.extend(ColorMaskFilter, createjs.Filter);
    p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
        if (!this.color) { return true; }
        targetCtx = targetCtx || ctx;
        if (targetX == null) { targetX = x; }
        if (targetY == null) { targetY = y; }

        targetCtx.save();
        if (ctx != targetCtx) {
            return false;
        }

        targetCtx.globalCompositeOperation = "source-out"; // Use source-in to fill the shape instead
    targetCtx.fillStyle = this.color;
        targetCtx.rect(targetX,targetY,width,height);
    targetCtx.fill();

        targetCtx.restore();
        return true;
    };
    p.clone = function () {
        return new AlphaMaskFilter(this.color);
    }; 
    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());

I put together a quick fiddle using this example: http://jsfiddle.net/dbtwd463/

Note: Edited from original which just suggested the approach to include a sample and fiddle

回答2:

Based on Lanny's advice I could come up with this filter.

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<canvas id="canvas" width="50" height="50" style="border:1px solid red; background: pink">
        no canvas!
    </canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext("2d");
  var stage = new createjs.Stage(canvas);

  function init(img) {
    var bmp = new createjs.Bitmap(img);
    stage.addChild(bmp);
    
    bmp.filters = [new createjs.ColorMaskFilter('#ffff00')];
    bmp.cache(0, 0, 30, 30);

    stage.update();
  }

  (function() {
    "use strict";

    function ColorMaskFilter(color) {
      this.color = color;
    }

    var p = createjs.extend(ColorMaskFilter, createjs.Filter);

    p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {
      targetCtx = targetCtx || ctx;
      if (targetX == null) {
        targetX = x;
      }
      if (targetY == null) {
        targetY = y;
      }

      targetCtx.save();
      if (ctx != targetCtx) {
        // TODO: support targetCtx and targetX/Y
        // clearRect, then draw the ctx in?
        return false;
      }

      if (!this.mask || this.mask.width != width || this.mask.height != height) {
        var shape = new createjs.Shape();
        shape.graphics.beginFill(this.color || '#ff0000');
        shape.graphics.drawRect(0, 0, width, height);
        shape.cache(0, 0, width, height);

        this.mask = shape.cacheCanvas;
      }

      targetCtx.globalCompositeOperation = "source-in";
      targetCtx.drawImage(this.mask, targetX, targetY);
      targetCtx.restore();
      return true;
    };

    /** docced in super class **/
    p.clone = function() {
      return new ColorMaskFilter(this.color);
    };

    /** docced in super class **/
    p.toString = function() {
      return "[ColorMaskFilter]";
    };


    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
  }());
</script>

<hr>Source: <img width="30" height="30" onload="init(this)" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzA5OUIxQjFGQUM5MTFFNjlCRDRBMjM4Qzg2RDM5M0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzA5OUIxQjJGQUM5MTFFNjlCRDRBMjM4Qzg2RDM5M0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MDk5QjFBRkZBQzkxMUU2OUJENEEyMzhDODZEMzkzQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3MDk5QjFCMEZBQzkxMUU2OUJENEEyMzhDODZEMzkzQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkob9IwAAAB0SURBVHjaYmT4X/GfYQAAE8MAARYY4z9DOyM9LGRkqPw/oD4e+KCGgcN2S+WA1ENqW2R7KJpxUPh48AQ1vuAhBwCj7v+g8vGoxaMWj1o8avGoxdSpJHAV8KNBTZWgBtbBj8CNwdFUTfX29UjrwgyYxQABBgBraRUTSfHtgAAAAABJRU5ErkJggg=="
/>

来源：https://stackoverflow.com/questions/42427180/how-to-overlay-non-transparent-part-of-bitmap-with-a-color-in-easeljs-createjs