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

Question

我正在从表单（在wordpress中）上传图像，我想允许用户使用铅笔工具在区域周围画一条线。想想photoshop中的套索工具。因此，用户基本上可以标记＆＃39;该区域有待修改。

我想看到的是，是否可以使用imagemagik，gd或客户端JS库来查找所选区域，并将内部的所有内容转换为透明。

这是一个示例图像。假设某人想要上传此图片，并使用上传器，他们标记一条红线以选择他们想要透明的内容。

所以红线内的图像应该由imagemagik / gd / client js检测，其中的所有内容都是透明的。

我找不到任何东西，看看这是不可能的。在服务器上我使用PHP所以如果可能的话，我可以在那里使用imgmagik / gd。所以我需要知道那些是否可以占据红色区域的内部并使其透明。但我更喜欢，如果我能找到客户端JS库或jquery插件，那么最终用户可以通过图像上传实用程序在客户端执行此操作。然后最终上传图像的最终修改版本。

非常感谢任何帮助或意见。

Answer 1

有一些工具使用HTML5的canvas＆amp; ImageMagick的。以下是我将如何实施解决方案。

在顶部显示带有canvas元素的上传图片。使用javascript来匹配宽度和宽度高度，并绑定事件侦听器以收集鼠标移动。

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

不是最好的，但它会给用户一些反馈。

在后端，将给定点标准化为（x，y）相关元组的列表。

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

此时，您可以绘制图像蒙版，然后将其应用于Imagick::compositeImage的图像。或使用Chroma Key颜色直接在图像上绘制＆amp;换成透明度。

$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

Answer 2

您可以使用ImageMagick执行此操作...

首先，你让那些不是红色的东西变成这样的黑色：

convert lion.jpg -fill black -fuzz 20% +opaque red out.jpg

然后你将它变为黑白，并使用一个阈值强制红色变为白色：

convert lion.jpg -fill black -fuzz 20% +opaque red -colorspace gray -threshold 5% out.jpg

现在，您从左上角（0,0）开始用白色填充图像：

convert out.jpg -fill white -draw 'color 0,0 floodfill' new.jpg

然后您将该黑白图像用作原始狮子图像的透明蒙版，并使用以下命令执行所有处理步骤：

convert lion.jpg \
    \( +clone -fill black -fuzz 20% +opaque red -colorspace gray -threshold 5% -fill white -draw 'color 0,0 floodfill' \) -compose copy-opacity -composite out.png

给出了这个：