使上传区域上的选定区域透明

Question

I am uploading an image from a form (in wordpress), and I want to allow users to use a pencil tool to draw a line around an area. Think of the lasso tool in photoshop. So users can basically 'mark' that area to be modified.

What I would like to see, is if it is possible to use either imagemagik, gd, or a client side JS library to find that selected area, and convert everything inside to be transparent.

here is an example image. Say a person wants to upload this image, and using the uploader, they marked a red line to select what they would like to be transparent.

So the image inside the red line, should be detected by imagemagik/gd/client js, and everything in there will be transparent.

I could not find anything to see if this was possible or not. On the server I am using PHP so I can do it there if needed with imgmagik/gd if it is possible. So I would need to know if those can take the inside of the red area and make it transparent. But I would prefer, if I could find a client side JS library or jquery plugin, that will let the end user do that on the client side via an image upload utility. and then finally upload the final modified version of the image.

Any help or input on this is greatly appreciated.

Answer 1

There's a few tools out there using HTML5's canvas & ImageMagick. Here's how I would implement a solution.

Display uploaded image with a canvas element on top. Use javascript to match width & height, and bind event listeners to collect mouse movements.

var MyDrawing = {
  // A new drawing event. Init points & start canvas path (for feedback)
  "start" : function(evt) {
    var point = [evt.layerX, evt.layerY];
    var ctx = this.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "red";
    ctx.moveTo(point[0], point[1]);
    this.points = [point];
  },
  "update" : function(evt) {
    if(this.points) {
      this.getContext("2d").lineTo([evt.layerX, evt.layerY]);
      this.points.push([evt.layerX, evt.layerY]); // Collect latest point
    }
  },
  "end" : function(evt) {
    var ctx = this.getContext("2d");
    ctx.lineTo(evt.layerX, evt.layerY);
    ctx.closePath();
    ctx.stroke();
    this.points.push([evt.layerX, evt.layerY])
    // Send points to server via ajax
    myAjaxFunctionHere(this.points);
  }
}
var c = document.getElementById("canvas");
c.addEventListener("mousedown", MyDrawing.start, false);
c.addEventListener("mousemove", MyDrawing.update, false);
c.addEventListener("mouseup", MyDrawing.end, false);

Not the best, but it gives the user some feed back.

On the backend, normalize the given points into a list of (x,y) associated tuples.

// Example of what ImagickDraw is expecting. 
$points = array(
             array('x' => 193, 'y' => 103),
             array('x' => 192, 'y' => 102),
             // ....
          );

At this point, you can either draw a image mask, and apply it to the image with Imagick::compositeImage. Or draw directly on the image with a Chroma Key color & swap to transparency.

$img = new Imagick('/path/to/uploaded/image.png'); // Load image
$chromaKey = new ImagickPixel('#6BFD00');          // Define Chroma
$draw = new ImagickDraw();                         //
$draw->setFillColor($chromaKey);                   // Fill with Chroma
$draw->polygon($points);                           // Draw Point
$img->drawImage($draw);                            // Apply to image
$img->paintTransparentImage($chromaKey, 0.0, 0.1); // Swap Chroma with transparent
$img->writeImage('/path/to/generated/image.png');  // Save to disk