在画布上图像的不透明部分周围绘制边框

Question

我正在使用

drawImage

在画布上绘制图像。这是一个被透明像素包围的 PNG，如下所示：

如何在画布上该图像的可见部分添加纯色边框？澄清一下：我不想要一个围绕图像边界框的矩形。边界应该围绕草地。

我确实考虑过使用阴影，但我并不真正想要发光的边框，我想要一个实心的边框。

Answer 1

有点晚了，但只需绘制图像offset，这比分析边缘快得多：

var ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = draw;
img.src = "https://i.sstatic.net/UFBxY.png";

function draw() {

  var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
      s = 2,  // thickness scale
      i = 0,  // iterator
      x = 5,  // final position
      y = 5;
  
  // draw images at offsets from the array scaled by s
  for(; i < dArr.length; i += 2)
    ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
  
  // fill with color
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = "red";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  
  // draw original image in normal mode
  ctx.globalCompositeOperation = "source-over";
  ctx.drawImage(img, x, y);
}

<canvas id=canvas width=500 height=500></canvas>

Answer 2

==>==>

一、归属：

正如@Philipp所说，您需要分析像素数据才能获得轮廓边框。

您可以使用“行进方块”算法来确定哪些透明像素与不透明草像素接壤。您可以在此处阅读有关 Marching Squares 算法的更多信息：http://en.wikipedia.org/wiki/Marching_squares

Michael Bostock 在他的 d3 数据可视化应用程序中有一个非常好的 Marching Squares 插件版本（恕我直言，d3 是最好的开源数据可视化程序）。这是该插件的链接：https://github.com/d3/d3-plugins/tree/master/geom/contour

您可以像这样勾勒出草图像的边框：

• 在画布上绘制图像

• 使用

  .getImageData

获取图像的像素数据

• 配置插件以查找与不透明像素接壤的透明像素

  // This is used by the marching ants algorithm
  // to determine the outline of the non-transparent
  // pixels on the image using pixel data
  var defineNonTransparent=function(x,y){
      var a=data[(y*cw+x)*4+3];
      return(a>20);
  }
  

• 调用插件，该插件返回一组勾画图像边框的点。

  // call the marching ants algorithm
  // to get the outline path of the image
  // (outline=outside path of transparent pixels
  points=geom.contour(defineNonTransparent);
  

• 使用这组点在图像周围绘制一条路径。

这里是带注释的代码和演示：

// Marching Squares Edge Detection
// this is a "marching ants" algorithm used to calc the outline path
(function() {
  // d3-plugin for calculating outline paths
  // License: https://github.com/d3/d3-plugins/blob/master/LICENSE
  //
  // Copyright (c) 2012-2014, Michael Bostock
  // All rights reserved.
  //
  //  Redistribution and use in source and binary forms, with or without
  //  modification, are permitted provided that the following conditions are met:
  //* Redistributions of source code must retain the above copyright notice, this
  //  list of conditions and the following disclaimer.
  //* Redistributions in binary form must reproduce the above copyright notice,
  //  this list of conditions and the following disclaimer in the documentation
  //  and/or other materials provided with the distribution.
  //* The name Michael Bostock may not be used to endorse or promote products
  //  derived from this software without specific prior written permission.
  // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
  geom = {}; 
  geom.contour = function(grid, start) { 
    var s = start || d3_geom_contourStart(grid), // starting point 
        c = [],    // contour polygon 
        x = s[0],  // current x position 
        y = s[1],  // current y position 
        dx = 0,    // next x direction 
        dy = 0,    // next y direction 
        pdx = NaN, // previous x direction 
        pdy = NaN, // previous y direction 
        i = 0; 

    do { 
      // determine marching squares index 
      i = 0; 
      if (grid(x-1, y-1)) i += 1; 
      if (grid(x,   y-1)) i += 2; 
      if (grid(x-1, y  )) i += 4; 
      if (grid(x,   y  )) i += 8; 

      // determine next direction 
      if (i === 6) { 
        dx = pdy === -1 ? -1 : 1; 
        dy = 0; 
      } else if (i === 9) { 
        dx = 0; 
        dy = pdx === 1 ? -1 : 1; 
      } else { 
        dx = d3_geom_contourDx[i]; 
        dy = d3_geom_contourDy[i]; 
      } 

      // update contour polygon 
      if (dx != pdx && dy != pdy) { 
        c.push([x, y]); 
        pdx = dx; 
        pdy = dy; 
      } 

      x += dx; 
      y += dy; 
    } while (s[0] != x || s[1] != y); 

    return c; 
  }; 

  // lookup tables for marching directions 
  var d3_geom_contourDx = [1, 0, 1, 1,-1, 0,-1, 1,0, 0,0,0,-1, 0,-1,NaN], 
      d3_geom_contourDy = [0,-1, 0, 0, 0,-1, 0, 0,1,-1,1,1, 0,-1, 0,NaN]; 

  function d3_geom_contourStart(grid) { 
    var x = 0, 
        y = 0; 

    // search for a starting point; begin at origin 
    // and proceed along outward-expanding diagonals 
    while (true) { 
      if (grid(x,y)) { 
        return [x,y]; 
      } 
      if (x === 0) { 
        x = y + 1; 
        y = 0; 
      } else { 
        x = x - 1; 
        y = y + 1; 
      } 
    } 
  } 

})();


//////////////////////////////////////////

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// checkbox to show/hide the original image
var $showImage=$("#showImage");
$showImage.prop('checked', true);

// checkbox to show/hide the path outline
var $showOutline=$("#showOutline");
$showOutline.prop('checked', true);

// an array of points that defines the outline path
var points;

// pixel data of this image for the defineNonTransparent 
// function to use
var imgData,data;

// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image
var defineNonTransparent=function(x,y){
  var a=data[(y*cw+x)*4+3];
  return(a>20);
}

// load the image
var img=new Image();
img.crossOrigin="anonymous";
img.onload=function(){

  // draw the image
  // (this time to grab the image's pixel data
  ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);

  // grab the image's pixel data
  imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
  data=imgData.data;

  // call the marching ants algorithm
  // to get the outline path of the image
  // (outline=outside path of transparent pixels
  points=geom.contour(defineNonTransparent);

  ctx.strokeStyle="red";
  ctx.lineWidth=2;

  $showImage.change(function(){ redraw(); });

  $showOutline.change(function(){ redraw(); });

  redraw();

}
img.src="http://i.imgur.com/QcxIJxa.png";

// redraw the canvas
// user determines if original-image or outline path or both are visible
function redraw(){

  // clear the canvas
  ctx.clearRect(0,0,canvas.width,canvas.height);

  // draw the image
  if($showImage.is(':checked')){
    ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);
  }

  // draw the path (consisting of connected points)
  if($showOutline.is(':checked')){
    // draw outline path
    ctx.beginPath();
    ctx.moveTo(points[0][0],points[0][4]);
    for(var i=1;i<points.length;i++){
      var point=points[i];
      ctx.lineTo(point[0],point[1]);
    }
    ctx.closePath();
    ctx.stroke();
  }

}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="showImage" />Show Image<br>
<input type="checkbox" id="showOutline" />Show Outline Path<br>
<canvas id="canvas" width=300 height=450></canvas>

Answer 3

我一直在寻找一种方法来做到这一点，但似乎只有费力的解决方案。

我想出了一个使用阴影和循环来在图像周围显示它们的小解决方法：

// Shadow color and blur
// To get a blurry effect use rgba() with a low opacity as it will be overlaid
context.shadowColor = "red";
context.shadowBlur = 0;

// X offset loop
for(var x = -2; x <= 2; x++){
    // Y offset loop
    for(var y = -2; y <= 2; y++){
        // Set shadow offset
        context.shadowOffsetX = x;
        context.shadowOffsetY = y;

        // Draw image with shadow
        context.drawImage(img, left, top, width, height);
    }
}

Answer 4

为了在 user1693593 答案的基础上构建，我添加了一种方法来在生成的图像之间添加缺失的步骤，以获得更粗的轮廓或更尖的基础图像。它的工作原理是根据设置的粒度在设置的检查点之间添加步骤。

  // Notice that I've used 0.75 instead of 0.5 as it generates less pointy border
  let dArr: number[][] = [
    [-0.75, -0.75], // ↖️
    [ 0   , -1   ], // ⬆️
    [ 0.75, -0.75], // ↗️
    [ 1   ,  0   ], // ➡️
    [ 0.75,  0.75], // ↘️
    [ 0   ,  1   ], // ⬇️
    [-0.75,  0.75], // ↙️
    [-1   ,  0   ], // ⬅️
  ];

  // Our breaking point, below 5 pixels it's not worth runing
  if (thickness > 5) {
    return dArr;
  }

  // 2.5 is the factor deciding the amount of steps in between checkpoints
  // the lower the number => the more steps will be added
  const granularity = Math.floor(thickness / 2.5);
  let newDArr: number[][] = [];
  for(let i=0; i < dArr.length; i++) {
    newDArr.push(dArr[i]);
    // c* is our current directions and d* is a destination 
    const [cX, cY] = dArr[i],
      [dX, dY] = i + 1 === dArr.length ? dArr[0] : dArr[i + 1]
    ;

    // Here we are defining our trends: up or down.
    // As Y and X can have different trend (X can go down where Y up)
    // we have to treat them independly
    const trendX = cX > dX ? -1 : 1,
      trendY = cY > dY ? -1 : 1,
      bX = (Math.abs(cX - dX)/granularity) * trendX,
      bY = (Math.abs(cY - dY)/granularity) * trendY,
      between: number[][] = []
    ;
    let x = cX,
      y = cY
    ;
    while (
      (
        trendX > 0 && x + bX < dX
        || trendX < 0 && x + bX > dX
      )
      && (
        trendY > 0 && y + bY < dY
        || trendY < 0 && y + bY > dY
      )
    ) {
      x += bX;
      y += bY;
      between.push([x, y]);
    }
    newDArr = newDArr.concat(between);
  }

  return newDArr;

整个功能（有用户1693593回答）：

const outlineImage = (
  image: HTMLImageElement,
  fill: string,
  thickness: number,
  asWidth: number,
  asHeight: number,
): void => {
  const canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d')!
  ;
  let dArr = [
    [-0.75, -0.75], // ↖️
    [ 0   , -1   ], // ⬆️
    [ 0.75, -0.75], // ↗️
    [ 1   ,  0   ], // ➡️
    [ 0.75,  0.75], // ↘️
    [ 0   ,  1   ], // ⬇️
    [-0.75,  0.75], // ↙️
    [-1   ,  0   ], // ⬅️
  ];

  if (thickness > 5) {
    const granularity = Math.floor(thickness / 2.5);
    let newDArr: number[][] = [];
    for(let i=0; i < dArr.length; i++) {
      newDArr.push(dArr[i]);
      const [cX, cY] = dArr[i],
        [dX, dY] = i + 1 === dArr.length ? dArr[0] : dArr[i + 1]
      ;

      const trendX = cX > dX ? -1 : 1,
        trendY = cY > dY ? -1 : 1,
        bX = (Math.abs(cX - dX)/granularity) * trendX,
        bY = (Math.abs(cY - dY)/granularity) * trendY,
        between: number[][] = []
      ;
      let x = cX,
        y = cY
      ;
      while (
        (
          trendX > 0 && x + bX < dX
          || trendX < 0 && x + bX > dX
        )
        && (
          trendY > 0 && y + bY < dY
          || trendY < 0 && y + bY > dY
        )
      ) {
        x += bX;
        y += bY;
        between.push([x, y]);
      }
      newDArr = newDArr.concat(between);
    }

    dArr = newDArr;
  }

  canvas.setAttribute('width', String(asWidth + thickness*2));
  canvas.setAttribute('height', String(asHeight + thickness*2));

  for (let i = 0; i < dArr.length; i++) {
    ctx.drawImage(
      image,
      thickness + dArr[i][0] * thickness,
      thickness + dArr[i][1] * thickness,
      asWidth,
      asHeight,
    );

    if (thickness === 0) {
      break;
    }
  }

  ctx.globalCompositeOperation = 'source-in';
  ctx.fillStyle = fill;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'source-over';

  ctx.drawImage(image, thickness, thickness, asWidth, asHeight);
}

之前： 后：

免责声明：

根据您想要添加的额外步骤的数量或边界的厚度，这可能会变得相当缓慢，并且在行进蚂蚁的解决方案上失去其边缘。