私はアップロードした画像の特定の多角形(ポイント間の曲線を含む6〜8頂点)の範囲をユーザーに選択させたいと思っています.HTML5 & JSを使用してこれを行うにはどうすればいいですか?私が見つけた唯一のライブラリーは、純粋に長方形の選択を可能にする:http://odyniec.net/projects/imgareaselect/JavaScript/jQueryを使用して画像のポリゴン領域を選択する方法は?
9
A
答えて
10
あなたが必要なものの一部を行うライブラリが既にあります:polyclip.js, by Zoltan Dulacあなたは、あなたのライブラリにデータを供給して、ユーザーがポイントを選択することを可能にするUIを構築することができますやり直し
編集:こちらはjsFiddle demonstrationです。元の画像上の点をクリックして選択し、生成ボタンを押してクロップドバージョンを生成します。
HTML:
<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button>
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;">
</div>
</div>
JS:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({width : this.width, height: this.height});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
}
$('#canvas').click(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#generate').click(function(){
$(".clipParent").empty();
$(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />');
var arr = [];
for(var i=0; i < clickX.length; i++){
arr.push(clickX[i]);
arr.push(clickY[i]);
}
$("#genimg")[0].setAttribute("data-polyclip",arr.join(", "));
clickX=[];
clickY=[];
redraw();
polyClip.init();
});
+0
大変ありがとう! – user1198133
0
あなたはキャンバスのタグに上の画像を読み込むことができ、その後、あなたはすべてのそのキャンバスにあなたが好きな描画を行うことができます。
関連する問題
- 1. アンドロイドの選択領域で画像をぼかす方法は?
- 2. 特定の領域を選択して画像を切り抜く方法
- 3. 画面領域の選択
- 4. クリックした領域の代わりに領域を選択する方法
- 5. 画像から領域を選択し、選択した領域をぼかしてウォーターマークを付けるにはどうしたらいいですか?
- 6. iOSでポリゴンの物理領域を計算する方法は?
- 7. 画像から矩形領域を切り抜く画像を使用して
- 8. ファブリックオブジェクトの選択領域を増やす方法は?
- 9. ピグレット画像の領域をPIL画像に配置する方法は?
- 10. Androidの画像の領域を制御する方法
- 11. wikiからポリゴンの領域を取得する方法mapia api
- 12. プログラムで領域を選択する
- 13. ストーリーボードを使用してタブバー選択した画像を変更する方法
- 14. 領域が選択されている場合、C-kをキル領域にバインドする方法。 else kill-line
- 15. 描画領域に画像を描画
- 16. 画像のマッピング領域
- 17. 矩形を使用して画像に検索領域を作成する
- 18. OpenGLを使用して画像を表示および選択する方法
- 19. スタック領域としてメモリ領域を使用しますか?
- 20. Matlabを使用して画像を8つの領域に分割する方法
- 21. jQueryウィザードでイメージの領域を選択
- 22. 最大の領域を持つオブジェクトを選択する方法は?
- 23. 画像を選択してアバターを設定する方法
- 24. JFreeChartはズームを行わずに領域を選択します
- 25. Googleのgeochartの自動選択領域
- 26. Selenium WebDriverを使用してブラウザクライアントの領域サイズを設定する方法は?
- 27. PyQT4 - 私はPyQT4を用いた画像ラベリングツールを記述したい領域を選択するための画像上
- 28. 特定の領域をペイントする方法。アンドロイドを使って画像を選択せずにTシャツを見る?
- 29. ツールを使用して、画像内の特定の領域の色コードを取得したり、 をペイントする方法画像
- 30. opencvで画像間の重複領域を見つける方法は?
おそらく、ユーザーがクリックするポイント間に線を引いて、自分で書く必要があります。それは非常に難しいことではありませんが、あなたの問題に非常に特有の12行です。多角形で何をしたいかによって決まるかもしれません。 –