如何使用JavaScript / jQuery选择图像的多边形区域？

Question

我希望能让用户在上传的图片中选择一个特定的多边形区域（6-8个拐点之间有曲线连接），请问如何使用HTML5和JS实现这一功能？我找到的唯一一个库只允许矩形选择：http://odyniec.net/projects/imgareaselect/

- user1198133

---

你可能需要自己编写代码，通过连接用户点击的点来绘制多边形。这并不是非常困难，但需要十几行代码来解决你的问题。这也取决于你想要用这个多边形做什么。 - Denys Séguret

Answer 1

已经有一个库可以完成你需要的部分功能：polyclip.js，作者是Zoltan Dulac。你可以构建一个用户界面让用户选择点，然后将数据传输给该库，就完成了。

编辑：这里有一个jsFiddle演示。点击原始图像上的某个位置进行点选，并按下“生成”按钮以生成裁剪后的版本。

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

- Asad Saeeduddin

Answer 2

你可以将图像加载到画布标签上，然后在该画布上进行任何你想要的绘制。

- Richard