Можете ли вы определить цветную линию в сборке html5 canvas из изображения диаграммы?

Question

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

Answer 1

Вы можете идентифицировать цвета, используя getImageData, но у этого метода есть определенные недостатки с тем, что вы хотите сделать.

Вот пример того, о чем ты говоришь

Демонстрация в реальном времени

// get the line
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
    points = [];

for(var y=0; y<canvas.height; y++){
    for(var x=0; x<canvas.width; x++){
       if(imageData.data[(y * (canvas.height*4) + (x*4))+2] == 255){ 
          points[x] = y;
       }
    }
}

// redraw the line with a y offset
ctx.strokeStyle = "rgb(255,0,0)";
ctx.beginPath();
for(var i = 0; i < points.length; i++){
    ctx.lineTo(i, points[i]+20);   
}
ctx.stroke();
ctx.closePath();

То, что сделано выше, - это сбор всех точек с голубым порогом 255. Но если какие-либо линии пересекаются и т. Д., Это будет отброшено, поскольку значение пикселя будет другим.

Answer 2

Сначала вы рисуете изображение в элементе canvas с помощью drawImage (), а затем получаете данные пикселей из холста.

var canvas = $("#yourCanvas"); 
var context = canvas.get(0).getContext("2d"); 

var image = new Image(); 
image.src = "imagename.jpg"; 
var imageData; 
var pixels; 

$(image).load(function() { 

    context.drawImage(image, 0, 0); 
    imageData = context.getImageData(0, 0, image.width, image.height); 
    pixels = imageData.data; // pixel data array of width*height*4 elements
                             // (r,g,b,alpha for every pixel)

});  

context.clearRect(0, 0, canvas.width(), canvas.height()); 

Теперь вы можете перейти в массив пикселей, чтобы проверить значение цветаделая что-то вроде этого.

var pos = 0; // index position into pixels array

for (y = 0; y < image.height; y++) {
    for (x = 0; x < image.width; x++) {

        var red = pixels[pos++]; 
        var green = pixels[pos++]; 
        var blue = pixels[pos++]; 
        var alpha = pixels[pos++];


        /* if is not black (red!=0, green!=0 and blue!=0) nor white (red!=255, 
           green!=255, blue!=255) it's the line are you looking for
           so use context.lineTo(x,y); and start drawing the first point.. and so on */


    }
}

Имейте в виду, что я считаю идеальным 0,0,0 черного и идеального 255,255,255 белого.может быть, вам следует реализовать некоторое шумоподавление для работы с реальными приложениями.

Answer 3

Да, это не очень сложно сделать, вам просто нужно следить за всем, что вы рисуете сами, чтобы вы могли перерисовать его (очистив холст и нарисовав все заново с возможно новыми координатами).

У меня есть простое учебное пособие о том, как создавать объекты (в данном случае прямоугольники), за которыми вы следите, чтобы вы могли перерисовать их (учебник охватывает перетаскивание). Все принципы могут применяться к строкам или к чему-либо еще в этом отношении.

В дополнение к этому, сделать что-то простое, как это, гораздо проще в SVG, где многие вещи (сохраненный чертеж, с помощью которого вы можете изменить координаты на лету, события мыши и т. Д.) Уже сделаны для вас. Возможно, вы захотите использовать SVG.