在画布上的透明区域边缘应用效果

Question

我有两幅画布--都是一样大小的。MainCanvas完全填充了一个背景图像。在SecondaryCanvas上，我有一个小图像--一个公司的标志，它有一些透明的区域(基本上所有的白色像素都将它们的alpha降到0)。

我想向SecondaryCanvas应用某种斜面或内部阴影，但只在有实际图像的情况下。通常情况下，我会看到人们划出一条路径来完成这个任务，但是我不可能追踪到不透明区域的边缘。

我该怎么做？想到我可以扫描整个SecondaryCanvas像素逐个像素，并检查它是否是相邻的像素透明或不透明(试图找到‘边缘’).并在像素上应用适当的颜色。但这似乎是非常密集的CPU。

Answer 1

这是我所知道的使用卷积滤波器最快的方法。

从源图像复制到目的地。我也为这个解决方案添加了一些标志。

这个函数(对拼写很抱歉)。

embose(imageDataSource，imageDataDestination，method，emboseImageEdge，perceptualCorrect，edgeOnly)

• imageDataSource:源图像的像素数据
• imageDataDestination:目标像素数据。必须与源不同，否则结果将不正确。必须是相同的尺寸
• 方法：(字符串) "3像素软“、"3像素”、"1像素“//忘记默认值之一，因此如果通过未知方法将崩溃。我相信你能解决
• emboseImageEdge：(布尔值)如果图像边缘的真像素被压花。
• perceptualCorrect：(布尔值)如果真，则使用人的感知值来表示亮度。运行时稍慢。
• edgeOnly：(布尔值)如果为真，则仅在透明边缘附近压花像素。否则用亮度压花所有不透明的像素。

函数在处理时返回true，如果未处理则返回false。如果为false，则没有更改像素。

东藤。我忘记了添加反转，但这很容易做到，只需倒转val = -val，所有的实施例数组中的值，然后将中心值设置为1(必须是一个，否则看起来不太好)。您也可以通过旋转实施器阵列中的负/正线来旋转光的方向，但这要复杂一些。对于更软的实施例，创建更大的卷积embos阵列。将size和halfSize设置为匹配。例如，3像素实施需要一个7×7阵列与size=7和halfSize = 3的一组相似的值。embos数组越大，函数的速度就越慢。对于非常大的图像，这将阻塞页面。如果将此函数用于大型图像，则将此函数移动到web工作者。

由于它使用卷积滤波器，它可以适应于做许多其他滤波器。虽然这一个只使用像素亮度，它是很容易修改为一个每个颜色的通道过滤器。因此，过滤器类型，这可以适应。高斯模糊，模糊，锐化，边缘检测，等等。

请参阅代码示例的底部，说明如何使用它。

希望这样做可以满足你的需要，也可以适应它。任何问题都可以随便问。对不起，评论目前是稀疏的，但我的时间很短。很快就会回来解决这个问题。

​

var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");

// Groover API log dependency replacement 
function log(data){
   // console.log(data); // just suck it up
}

// Groover Bitmaps API dependency replacement
// Extracted from Groover.Bitmaps
var createImage= function(w,h){ // create a image of requier size
    var image = document.createElement("canvas"); 
    image.width = w;
    image.height =h;
    image.ctx = image.getContext("2d");  // tack the context onto the image
    return image;
}    
    

function embose(imageDataSource,imageDataDestination, method, emboseImageEdge, perceptualCorrect,edgeOnly){
    "use strict";
    var dataS = imageDataSource.data;
    var dataD = imageDataDestination.data;
    var w = imageDataSource.width;
    var h = imageDataSource.height;
    if(dataS.length !== dataD.length){
        return false; // failed due to size mismatch
    }
    var embos,size,halfSize;
    var lMethod = method.toLowerCase(); // some JS engines flag reasignment of
                                        // arguments as unoptimised as this 
                                        // is computationally intensive create a
                                        // new var for lowercase

    if(lMethod === "2 pixel soft" ){
        embos = [  
            -0.25   ,  -0.5 ,  -1,  -1 , 0.5,
            -0.5   ,  -1 ,  -1,  1 , 1,
            -1   ,  -1 ,  1, 1 , 1,
            -1   ,  -1 , 1, 1 , 0.5,
            -0.5   ,  1, 1, 0.5 , 0.25 
        ];
        size = 5;
        halfSize = 2;
    }else
    if(lMethod === "2 pixel" ){
        embos = [  
            -1   ,  -1 ,  -1,  -1 , 1,
            -1   ,  -1 ,  -1,  1 , 1,
            -1   ,  -1 ,  1, 1 , 1,
            -1   ,  -1 , 1, 1 , 1,
            -1   ,  1, 1, 1 , 1 
        ];
        size = 5;
        halfSize = 2;
    }else
    if(lMethod === "1 pixel" ){
        embos = [  
            -1 , -1,  -1,
            -1,  1, 1,
            1 , 1,  1 
        ];
        size = 3;
        halfSize = 1;
    }
var deb = 0
    var x,y,l,pl,g,b,a,ind,scx,scy,cx,cy,cInd,nearEdge,pc;
    pc = perceptualCorrect; // just for readability
    for(y = 0; y < h; y++){
        for(x = 0; x < w; x++){
            ind = y*4*w+x*4;
            l = 0;
            nearEdge = false;
            if(dataS[ind+3] !== 0){ // ignor transparent pixels
                for (cy=0; cy<size; cy++) {
                    for (cx=0; cx<size; cx++) {
                        scy = y + cy - halfSize;
                        scx = x + cx - halfSize;
                        if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
                            cInd = (scy*w+scx)*4;
                            if(dataS[cInd+3] === 0){
                                nearEdge = true;
                            }
                            l += pc?(embos[cy*size+cx] * 
                                        ((Math.pow(dataS[cInd++]*0.2126,2)+
                                         Math.pow(dataS[cInd++]*0.7152,2)+
                                         Math.pow(dataS[cInd++]*0.0722,2)
                                        )/3)):
                                    (embos[cy*size+cx] * 
                                        ((dataS[cInd++]+
                                         dataS[cInd++]+
                                         dataS[cInd++]
                                        )/3));
                                      
                        }else
                        if(emboseImageEdge){
                            nearEdge = true;
                        }
                    }
                }
                        
                if((nearEdge && edgeOnly) || ! edgeOnly){
                    if(pc){
                        pl = Math.sqrt((Math.pow(dataS[ind]*0.2126,2) + Math.pow(dataS[ind+1]*0.7152,2) + Math.pow(dataS[ind+2]*0.0722,2))/3);
                        l = Math.sqrt(Math.max(0,l));

                        if(pl > 0){
                            pl = l/pl;
                            dataD[ind] = Math.sqrt(dataS[ind]*dataS[ind++]*pl);
                            dataD[ind] = Math.sqrt(dataS[ind]*dataS[ind++]*pl);
                            dataD[ind] = Math.sqrt(dataS[ind]*dataS[ind++]*pl);
                            dataD[ind] = dataS[ind]; // alpha not effected
                        }else{ // black pixel 
                            dataD[ind++] = 0;
                            dataD[ind++] = 0;
                            dataD[ind++] = 0;
                            dataD[ind] = dataS[ind];
                        }
                    }else{
                        l = Math.max(0,l);
                        pl = (dataS[ind]+dataS[ind+1]+dataS[ind+2])/3;
                        if(pl > 0){
                            pl = l/pl;
                            dataD[ind] = dataS[ind++]*pl;
                            dataD[ind] = dataS[ind++]*pl;
                            dataD[ind] = dataS[ind++]*pl;
                            dataD[ind] = dataS[ind]; // alpha not effected
                            
                        }else{ // black pixel 
                            dataD[ind++] = 0;
                            dataD[ind++] = 0;
                            dataD[ind++] = 0;
                            dataD[ind] = dataS[ind];
                        }
                    }
                }else{  // if not edge then just copy image pixel to dest
                    dataD[ind] = dataS[ind++];
                    dataD[ind] = dataS[ind++];
                    dataD[ind] = dataS[ind++];
                    dataD[ind] = dataS[ind];
                }
            }else{  // set transparent pixel to zero
                dataD[ind+3] = 0;
            }
        }
 
    }
    // all done
    return true; // return success
}
var img = createImage(128,128);
img.ctx.font = "32px arial black";
img.ctx.textAlign = "center";
img.ctx.textBaseline = "middle";
img.ctx.lineCap = "round";
img.ctx.lineJoin = "round";
img.ctx.lineWidth = 4
img.ctx.strokeStyle = "#3AD";
img.ctx.fillStyle = "#334";
img.ctx.strokeText("LOGO!",64,64);
img.ctx.fillText("LOGO!",64,64);
ctx.drawImage(img,0,0);
var img1 = createImage(128,128);
var imgData = img.ctx.getImageData(0,0,128,128);
var imgData1 = img1.ctx.getImageData(0,0,128,128);
if(embose(imgData,imgData1,"2 pixel soft",false, true, false)){
    img1.ctx.putImageData(imgData1,0,0);
    log("ONe")
    ctx.drawImage(img1,128,0);
}
img.ctx.fillStyle = "#DA3";  // make is look better for the sell ;)
img.ctx.fillText("LOGO!",64,64);  
var imgData = img.ctx.getImageData(0,0,128,128);
var img1 = createImage(128,128);
var imgData1 = img1.ctx.getImageData(0,0,128,128);
if(embose(imgData,imgData1,"2 pixel",false, true, true)){
    img1.ctx.putImageData(imgData1,0,0);
    ctx.drawImage(img1,0,128);
}

var img1 = createImage(128,128);
var imgData1 = img1.ctx.getImageData(0,0,128,128);
if(embose(imgData,imgData1,"1 pixel",false, false, false)){
    img1.ctx.putImageData(imgData1,0,0);
    ctx.drawImage(img1,128,128);
}

.canC {
    width:256px;
    height:256px;
}

<canvas class="canC" id="canV" width=256 height=256></canvas>

​