HTML5 photoshopのようなポリゴンの高さ選択

Question

私は閉じた形を作成させることによって写真の一部を切り取るためのツールを構築しようとしています。ユーザーは線の描画を開始できるはずです。点aから点bまでをc、e、d、e、f ....とすると、最終的に再びaをポイントして形を閉じる。

私はこれにHTML5キャンバスを使用したいと思います。私はこれがうまくいくと思うし、IE /旧式のブラウザの代わりにflashcanvasのようなものを使うことを考えていますか？

この種のものを構築するために使用できるチュートリアル/オープンソースアプリケーションはありますか？ HTML5キャンバスを使用してアプリケーションを構築するのは初めてです。心配する必要がある落とし穴はありますか？

Answer 1

これはキャンバスの高度な使い方だと思います。基本、描画方法、レイヤーの使い方、ピクセルの操作方法について知っておく必要があります。チュートリアルについてはGoogleにお尋ねください。

あなたが前のことを知っているとすれば、私は試してみましょう。私はその前にやったことがないが、私はアイデアがあります

• あなたの写真（あなたの写真のサイズ）
• ユーザーが選択を描く層を含む1：

  をあなたは3つのキャンバスを必要とします形状（最初のキャンバスの上にあなたの写真のサイズ、）

• 結果キャンバス、あなたのトリミングされた画像が含まれています（同じサイズで、この1つは、表示する必要はありません）

ユーザーがクリックオン私たちの写真：実際には、彼は層をクリックし、層はクリアされ、新しい行が始まります。

別の時間にクリックすると、前に開始された行が描画され、別の行が開始されます。これは、空白でないピクセルをクリックするまで続けられます。

ユーザーが行をプレビューしたい場合は、別のキャンバスを必要とする（ここではhttp://dev.opera.com/articles/view/html5-canvas-painting/#lineを説明した）形状が閉じているとき

、ユーザーは自分がしたい部分を決定するために形状の内側または外側をクリックする必要があります選択します。その部分を半透明の灰色で塗りつぶします（例：http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/）。

ここでレイヤーキャンバスには、ユーザーの選択に応じた色付きの図形が含まれています。

あなたの層からの画素データを取得し、アレイを介し索引で非空白ピクセルを見つけるたびに読んで私は、あなたのメインのキャンバスから結果キャンバスに、このピクセルをコピーします。

/* First, get pixel data from your 3 canvas into 
* layerPixData, resultPixData, picturePixData 
*/ 

// read the entire pixel array 
for (var i = 0 ; i < layerPixData.length ; i+=4) { 
    //if the pixel is not blank, ie. it is part of the selected shape 
    if (layerPixData[i] != 255 || layerPixData[i+1] != 255 || layerPixData[i+2] != 255) { 
     // copy the data of the picture to the result 
     resultPixData[i] = picturePixData[i]; //red 
     resultPixData[i+1] = picturePixData[i+1]; //green 
     resultPixData[i+2] = picturePixData[i+2]; //blue 
     resultPixData[i+3] = picturePixData[i+3]; //alpha 

     // here you can put the pixels of your picture to white if you want 

    } 

} 

ピクセル操作の仕組みがわからない場合は、こちらをお読みくださいhttps://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

次に、putImageDataを使用してピクセルを結果キャンバスに描画します。仕事が終わった！

あなたの選択の行を移動したい場合は、移動するための方法：ここでhttp://simonsarris.com/blog/225-canvas-selecting-resizing-shape

Answer 2

は、あなたがそれを行うべきかです： 以下のコードは、ページの一番上にキャンバスを追加し、クリックすることにより、および選択領域が強調表示されるようにドラッグします。その後に行う必要があることは、基になるページからのスクリーンショットを作成し、キャンバス内の作成されたイメージからマスクレイヤーを作成し、他の1つの回答に表示される方法と同じようにスクリーンショットに適用することです。

/* sample css code for the canvas 
#overlay-canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: transparent; 
    opacity: 0.4; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
} 
*/ 

function getHighIndex(selector) { 
    if (!selector) { selector = "*" }; 

    var elements = document.querySelectorAll(selector) || 
        oXmlDom.documentElement.selectNodes(selector); 
    var ret = 0; 

    for (var i = 0; i < elements.length; ++i) { 
     if (deepCss(elements[i],"position") === "static") 
      continue; 

     var temp = deepCss(elements[i], "z-index"); 

     if (temp != "auto") 
      temp = parseInt(temp, 10) || 0; 
     else 
      continue; 

     if (temp > ret) 
      ret = temp; 
    } 
    return ret; 
} 

maxZIndex = getHighIndex(); 

$.fn.extend({ 
    lasso: function() { 
     return this 
     .mousedown(function (e) { 
      // left mouse down switches on "capturing mode" 
      if (e.which === 1 && !$(this).is(".lassoRunning")) { 
       var point = [e.offsetX, e.offsetY]; 
       $(this).addClass("lassoRunning"); 
       $(this).data("lassoPoints", [point]); 
       $(this).trigger("lassoStart", [point]); 
      } 
     }) 
     .mouseup(function (e) { 
      // left mouse up ends "capturing mode" + triggers "Done" event 
      if (e.which === 1 && $(this).is(".lassoRunning")) { 
       $(this).removeClass("lassoRunning"); 
       $(this).trigger("lassoDone", [$(this).data("lassoPoints")]); 
      } 
     }) 
     .mousemove(function (e) { 
      // mouse move captures co-ordinates + triggers "Point" event 
      if ($(this).is(".lassoRunning")) { 
       var point = [e.offsetX, e.offsetY]; 
       $(this).data("lassoPoints").push(point); 
       $(this).trigger("lassoPoint", [point]); 
      } 
     }); 
    } 
}); 


function onLassoSelect() { 
    // creating canvas for lasso selection 
    var _canvas = document.createElement('canvas'); 
    _canvas.setAttribute("id", "overlay-canvas"); 
    _canvas.style.zIndex = ++maxZIndex; 
    _canvas.width = document.width 
    _canvas.height = document.height 
    document.body.appendChild(_canvas); 
    ctx = _canvas.getContext('2d'), 
    ctx.strokeStyle = '#0000FF'; 
    ctx.lineWidth = 5; 

    $(_canvas) 
     .lasso() 

     .on("lassoStart", function(e, lassoPoint) { 
      console.log('lasso start'); 

      var pos = lassoPoint; 
      ctx.beginPath(); 
      ctx.moveTo(pos[0], pos[1]); 
      console.log(pos); 
     }) 

     .on("lassoDone", function(e, lassoPoints) { 
      console.log('lasso done'); 

      var pos = lassoPoints[0]; 
      ctx.lineTo(pos[0], pos[1]); 
      ctx.fill(); 
      console.log(pos); 
     }) 

     .bind("lassoPoint", function(e, lassoPoint) { 
      var pos = lassoPoint; 
      ctx.lineTo(pos[0], pos[1]); 
      ctx.fill(); 
      console.log(pos); 
     }); 
}