在画布上的图像不透明部分周围绘制边框
Posted
技术标签:
【中文标题】在画布上的图像不透明部分周围绘制边框【英文标题】：Draw border around nontransparent part of image on canvas 【发布时间】：2015-03-28 05:41:31 【问题描述】：我正在使用drawImage 在画布上绘制图像。这是一个被透明像素包围的PNG，如下所示：
如何为画布上该图像的可见部分添加纯色边框？澄清一下：我不想要一个围绕图像边界框的矩形。边界应该绕过草地。
我确实考虑过使用阴影，但我真的不想要一个发光的边框，我想要一个实心的。
【问题讨论】：
AFAIK 对此没有开箱即用的解决方案。您可能不得不使用 getImageData 和 putImageData 进行像素级操作。 【参考方案1】：==> ==>
首先，归属地：
正如@Philipp 所说，您需要分析像素数据以获得轮廓边框。
您可以使用“Marching Squares”算法来确定哪些透明像素与不透明的草地像素相邻。您可以在此处阅读有关 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;
canvasborder: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>【讨论】：
惊人的答案！完美运行。 虽然 K3N 的 对这个问题的回答更为恰当，但我要感谢您提供一种获取路径点的方法，它可以让您获得的不仅仅是大纲:) 效果很好。它可以用于具有两个独立形状的图像，例如 - sportsauthority.com/graphics/product_images/… sn-p 已损坏，因为示例图像返回 404。【参考方案2】：有点晚了，不过只是绘制图像偏移，这比分析边缘要快得多：
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/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>【讨论】：
嗨，肯，欢迎回来！为有效的答案投票。 @epistemex：与其他答案相比，我喜欢你的代码的简洁性，但我在让它完美运行时遇到了一些麻烦，不明白为什么。您能否详细解释一下它是如何工作的？尤其是为什么dArr 变量有 8 个坐标对？它们与画布到底有什么关系？我正在使用它来为一些非常不规则的路径设置边界，这些路径已经在整个地方进行了缩放、转换和其他操作，然后最终在它们周围绘制了边界，因此有时边界被部分切断。有什么想法可以解决这个问题吗？谢谢！
@Kenny83 当然。如前所述，dArr 只是一个偏移量 arr。为了方便。它与画布本身无关。每对都是相对于我们要绘制的位置相对的 (x,y) 偏移量。因此，我们无需使用 8 个 drawImage 调用并手动添加偏移量（例如 x+1、y- 等），我们只需迭代数组并从那里应用对。为什么？仅在 4 个方向上绘制的较粗边框将开始在拐角处创建“间隙”，因此您需要绘制更多实例以使边框更平滑。像这里这样的数组可以帮助解决这个问题，但不是唯一的方法。
@Kenny83 在没有看到代码的情况下不确定如何解决您描述的问题。我建议为此提出一个问题。这样我们就可以仔细观察了。
那些透明的图片呢？我该如何解决这个问题？【参考方案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);
【讨论】：
以上是关于在画布上的图像不透明部分周围绘制边框的主要内容，如果未能解决你的问题，请参考以下文章