Вопрос по html5-canvas, jquery, javascript, html5 – Как выбрать многоугольную область изображения с помощью JavaScript / jQuery?

9

Мне бы хотелось, чтобы мои пользователи могли выбирать конкретную многоугольную (6-8 вершин с изогнутыми линиями между точками) область загружаемого ими изображения - как мне это сделать, используя HTML5 & amp; JS? Единственная библиотека, которую я нашел, допускает чисто прямоугольный выбор:http://odyniec.net/projects/imgareaselect/

Вам, вероятно, придется написать это самостоятельно, рисуя линии между точками, которые нажимает пользователь. Это не очень сложно, но дюжина строк, очень специфичных для вашей проблемы. Это может зависеть от того, что вы хотите сделать со своим полигоном. Denys Séguret

Ваш Ответ

2   ответа
10

polyclip.js, Золтан Дюлак Вы можете создать пользовательский интерфейс, который позволяет пользователю выбирать точки, а затем передавать данные в библиотеку, и все готово.

РЕДАКТИРОВАТЬ: Вотдемонстрация 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(); 
});
большое спасибо !! user1198133
0

а затем вы можете делать все рисунки, которые вам нравятся, на этом холсте.

Похожие вопросы