チャートのイメージから作成したhtml5キャンバスの色付き線を特定できますか？

Question

私は、線グラフのイメージを持っていて、かなりシンプルな、おそらく白い背景、黒の軸線、およびその線のいくつかの他の色を持っているとしましょう。私はキャンバスにイメージを変えるつもりです。キャンバスでそのラインを識別する方法があるかどうかを知りたいと思います。これは、私が行を操作するなど、多くのことをすることができます...

Answer 1

getImageDataを使用して色を識別することができますが、間違いなくあなたがやりたいと思う方法を使用して欠点があります。

相続人はあなたを約

Live Demo

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

はい、それほど難しいことではありません。描画するすべてのものを追跡しておく必要があります（キャンバスを消去し、新しい座標ですべてを再び描画することによって）。

私はsimple tutorialオブジェクトを作成する方法（この場合は四角形）を作成して、再描画できるようにしています（チュートリアルではドラッグしています）。すべての原則は、そのような問題のために線などに適用される可能性があります。

サイドノートでは、このような単純な作業はSVGで非常に簡単です（その場での座標を変更できる保持された図面やマウスイベントなど）が既に実行されています。代わりにSVGを使用することを検討したいかもしれません。

Answer 3

まず、画像を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白を考えていることに留意してください。おそらく、実生活のアプリケーションを処理するためにいくつかのノイズリダクションを実装する必要があります。