JS Image Manipulation - Автообрезка дополнительного фона вокруг объекта - PullRequest
Новая
       89

JS Image Manipulation - Автообрезка дополнительного фона вокруг объекта

0 голосов
/ 05 октября 2018

Я делаю приложение, в котором пользователи будут загружать фотографии (большинство из них должны быть какими-то логотипами), а затем преобразовываю эту фотографию в svg.Sample image На изображении выше я хочу вырезать изображение, где красный прямоугольник перед преобразованием в SVG.

Я пробовал это с MarvinJ (https://www.marvinj.org/en/index.html), как впример (определение функций), но не удалось получить согласованные результаты.

Позже я попробовал это с trackingjs (https://trackingjs.com/),, но также без согласованных результатов. trackingjs Любая помощь приветствуется.

1 Ответ

0 голосов
/ 08 октября 2018

Возможно, в вашем случае вы просто должны найти не фоновые пиксели, помещающиеся в прямоугольник.Эта версия будет работать только на светлом фоне.Вам нужно изменить его, чтобы он работал в других сценариях.

результат для двух логотипов:

enter image description here

enter image description here

код запуска ниже: 

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