जावास्क्रिप्ट/jQuery का उपयोग कर छवि के बहुभुज क्षेत्र का चयन कैसे करें?

Question

मैं अपने उपयोगकर्ताओं को अपलोड की गई छवि के एक विशिष्ट बहुभुज (बिंदुओं के बीच घुमावदार रेखाओं के साथ 6-8 शिखर) का चयन करने में सक्षम होना चाहता हूं - मैं HTML5 & जेएस का उपयोग करके ऐसा करने के लिए कैसे जा सकता हूं? केवल पुस्तकालय मैंने पाया विशुद्ध रूप से आयताकार चयन की अनुमति देता है: http://odyniec.net/projects/imgareaselect/

Answer 1

वहां पहले से ही एक पुस्तकालय है कि तुम क्या जरूरत का हिस्सा करता है: polyclip.js, by Zoltan Dulac आप एक यूआई कि उपयोगकर्ता अंक चुनने की अनुमति देता निर्माण कर सकते हैं तो पुस्तकालय के लिए डेटा फ़ीड और आप किया गया

संपादित करें: यहां एक jsFiddle demonstration है। मूल छवि पर बिंदुओं का चयन करने के लिए क्लिक करें और एक फसल संस्करण उत्पन्न करने के लिए जेनरेट बटन दबाएं।

एचटीएमएल:

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

जे एस:

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(); 
}); 

Answer 2

आप कैनवस टैग करने पर छवि को लोड कर सकता है और फिर आप सब आपको लगता है कि कैनवास पर की तरह ड्राइंग कर सकते हैं।