javascript - JS 图像处理 - 自动裁剪对象周围的额外背景

Question

我正在制作一个应用程序，用户将在其中上传照片（其中大多数应该是某种徽标），然后将该照片转换为 svg。 在上图中，我想在转换为 svg 之前剪切红色矩形所在的图像。

我在示例（检测功能）中使用 MarvinJ（https://www.marvinj.org/en/index.html）进行了尝试，但无法获得一致的结果。

后来我用 trackingjs ( https://trackingjs.com/ ) 尝试了这个，但也没有一致的结果。 任何帮助表示赞赏。

标签： javascriptimageimage-processingimage-manipulation

Answer 1

也许，在您的情况下，您应该简单地找到适合矩形的非背景像素。此版本仅适用于浅色背景。您需要对其进行更改以使其在其他情况下工作。

两个徽标的结果：

下面的可运行代码：

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var image1 = new MarvinImage();
var image2 = new MarvinImage();
image1.load("https://i.imgur.com/0maopmf.jpg", image1Loaded);
image2.load("https://i.imgur.com/rWcofCi.jpg", image2Loaded);

function image1Loaded(){
  processImage(image1, canvas1);
}
function image2Loaded(){
  processImage(image2, canvas2);
}
function processImage(image, canvas){
  var bbox = boundingBox(image);
  image.drawRect(bbox[0]-10, bbox[1]-10, bbox[2]-bbox[0]+20, bbox[3]-bbox[1]+20, 0xFFFF0000);
  image.draw(canvas);
}

function boundingBox(image){
  var x1=9999, x2=-1, y1=9999, y2=-1;
  var img = image.clone();
  Marvin.thresholding(img, img, 127);
  for(var y=0; y<img.getHeight(); y++){
    for(var x=0; x<img.getWidth(); x++){
      // Is Black (Object)?
      if(img.getIntColor(x,y) == 0xFF000000){
        if(x < x1) x1 = x;
        if(x > x2) x2 = x;
        if(y < y1) y1 = y;
        if(y > y2) y2 = y;
  }}}
  return [x1, y1, x2, y2];
}

<script src="https://www.marvinj.org/releases/marvinj-0.9.js"></script>
<canvas id="canvas1" width="600" height="300"></canvas>
<canvas id="canvas2" width="600" height="347"></canvas>