javascript - Canvas 图像的羽化边框

Question

我有一个加载了以下图像的 Canvas :

背景图片:

正面图片:

两者看起来像这样的图像:

现在我想对手板应用羽毛效果以产生类似这样的效果:

到目前为止，我尝试了以下解决方案。但结果与上图不同。

 
var temp = document.createElement('canvas'),
                tx = temp.getContext('2d');

            temp.width = scope.canvas.width;
            temp.height = scope.canvas.height;

            tx.translate(-temp.width, 0);
            tx.shadowOffsetX = temp.width;
            tx.shadowOffsetY = 0;
            tx.shadowColor = '#000';
            tx.shadowBlur = 100;

            var img = new Image();
            img.onload = function() {
                tx.drawImage(img, 0, 0, 512, 512);
            };
            img.src = imageURL; // the hand image


var temp2 = document.createElement('canvas'),
                tx2 = temp2.getContext('2d');
            temp2.width = scope.canvas.width;
            temp2.height = scope.canvas.height;

            var img2 = new Image();
            img2.onload = function() {
                tx2.drawImage(img2, 0, 0, 512, 512);
                tx2.save();
                tx2.globalCompositeOperation = 'destination-out';
                tx2.drawImage(temp, 0, 0);
                tx2.restore();

  
            };
            img2.src = temp.toDataURL("image/png");

知道如何解决这个问题吗？

问候史蒂夫

Answer 1

要羽化图像，通过新 Canvas 创建它的副本，使用 destination-out comp 创建图像的反转蒙版。然后再次绘制手，然后使用 destination-ou 蒙版，但使用阴影创建羽毛。

var canvas = document.createElement("canvas");
canvas.width = 1024,canvas.height = 1024;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

var hand = new Image();
hand .src = "http://i.stack.imgur.com/PbAfc.png";
hand .onload = function(){
    var can = document.createElement("canvas");
    can.width = this.width;
    can.height = this.height;
    ct = can.getContext("2d");
    // create inverted  mask 
    ct.fillStyle = "black";
    ct.fillRect(0,0,this.width,this.height);
    ct.globalCompositeOperation = "destination-out";
    ct.drawImage(this,0,0);
    // create second canvas
    var can1 = document.createElement("canvas");
    can1.width = this.width;
    can1.height = this.height;
    ct1 = can1.getContext("2d");
    // draw image 
    ct1.drawImage(this,0,0);
    ct1.shadowColor = "black";
    ct1.shadowBlur = 30; // amount of feather
    ct1.globalCompositeOperation = "destination-out";
    ct1.drawImage(can,0,0);
    ct1.shadowBlur = 20; // amount of feather
    ct1.drawImage(can,0,0);  // The mor you draw the greater the FX
    ct1.shadowBlur = 10; // amount of feather
    ct1.drawImage(can,0,0);  // The mor you draw the greater the FX

    ct1.globalCompositeOperation = "source-over";
    ct.globalCompositeOperation = "source-over";
    ctx.drawImage(can1,0,0);  
    // use the new canvas can1 as the hand image in later code.
}
//ctx.fillStyle = "#e19e9e"
ctx.fillRect(0,0,1024,1024);