我希望能够让我的用户选择他们上传的图像中特定的多边形(点之间有曲线的6-8顶点)区域 - 我该如何使用HTML5 & JS来做这件事?我发现的唯一库允许纯矩形选区:http://odyniec.net/projects/imgareaselect/如何使用JavaScript/jQuery选择图像的多边形区域?
9
A
回答
10
有已,做你需要什么零件库:polyclip.js, by Zoltan Dulac您可以构建一个用户界面,允许用户选择点,然后将数据反馈到库和你'重做。
编辑:这是一个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. jquery图像定义区域多边形
- 2. 如何从WinForm pictureBox中的图像裁剪多边形区域?
- 3. 选择图像的区域
- 4. JQuery图像选择区域
- 5. 多边形区域计算
- 6. 计算多边形区域
- 7. 获取图像特定区域的所有多边形坐标?
- 8. 如何选择八度图像的100x100像素的内心正方形区域?
- 9. 带有多边形孔的多边形区域内的点
- 10. 在图像上绘制正多边形并计算区域
- 11. GWT - 区域选择/图像地图
- 12. 在android中使用边缘检测选择区域后的裁剪图像
- 13. 谷歌地图 - 获取区域的多边形边缘/附近
- 14. 使用选定区域的矩形框来裁剪图像?
- 15. Java中多边形的计算区域
- 16. 复杂的多边形区域
- 17. 选择图像中第二大区域
- 18. 在Java中,如何使用多边形选择另一个图像的子图像?
- 19. InkCanvas上选择多边形
- 20. 多边形选择OpenLayers 3
- 21. 使用CImg库从显示的图像中选择区域
- 22. 如何选择,显示和保存图形区域?
- 23. 科学图像处理 - 用于选择的最小边界区域(imageJ?)
- 24. 如何在区域形状上使用onMouseOver更改图像?
- 25. 使用cgal计算两个多边形的交集区域
- 26. matplotlib选择图像区域的图像,然后放大
- 27. DbGeography - 选择包含在多边形内的多边形/线串
- 28. 填充区域的矩形选择?
- 29. 如何清除画布元素中的多边形区域?
- 30. 如何以形状/多边形的形式渲染图像?
您可能必须亲自编写它,方法是在用户单击的点之间画线。这不是非常困难,但有十几行非常针对你的问题。这可能取决于你想要用你的多边形做什么。 –