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

Question

I'm drawing an image onto a canvas using drawImage . It's a PNG that is surrounded by transparent pixels, like this:

How can I add a solid-colored border to the visible part of that image on the canvas? To clarify: I don't want a rectangle that surrounds the image's bounding box. The border should go around the grass patch.

I did consider using shadows, but I don't really want a glowing border, I want a solid one.

Answer 1

A bit late, but just draw the image offset which is much faster than analyzing the edges:

 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>

Answer 2

==> ==>

First, attributions:

As @Philipp says, you'll need to analyze pixel data to get your outline border.

You can use the "Marching Squares" algorithm to determine which transparent pixels border the non-transparent grass pixels. You can read more about the Marching Squares algorithm here: http://en.wikipedia.org/wiki/Marching_squares

Michael Bostock has a very nice plugin version of Marching Squares in his d3 data visualization application (IMHO, d3 is the best open-source data visualization program available). Here's a link to the plugin: https://github.com/d3/d3-plugins/tree/master/geom/contour

You can outline the border of your grass image like this:

• Draw your image on the canvas

• Grab the image's pixel data using .getImageData

• Configure the plug-in to look for transparent pixels bordering opaque pixels

  // 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 plugin which returns a set of points which outline the border of your image.

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

• Use the set of points to draw a path around your image.

Here's annotated code and a Demo:

 // 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

I was looking for a way to do this and it seems there are only laborious solutions.

I came up with a little workaround using shadows and a loop to display them all around the image:

// 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);
    }
}