Tôi muốn có thể cho phép người dùng của mình chọn một vùng hình đa giác cụ thể (6-8 đỉnh với các đường cong giữa các điểm) của hình ảnh mà họ tải lên - làm cách nào để tôi thực hiện việc này bằng cách sử dụng HTML5 & JS? Thư viện duy nhất tôi tìm thấy cho phép lựa chọn hình chữ nhật hoàn toàn: http://odyniec.net/projects/imgareaselect/Cách chọn vùng đa giác của hình ảnh bằng JavaScript/jQuery?
9
A
Trả lời
10
Đã có thư viện làm một phần của những gì bạn cần: polyclip.js, by Zoltan Dulac Bạn có thể xây dựng giao diện người dùng cho phép người dùng chọn điểm, sau đó cấp dữ liệu vào thư viện và bạn xong rồi.
EDIT: Đây là jsFiddle demonstration. Nhấn vào đây để chọn các điểm trên ảnh gốc và nhấn nút Tạo để tạo phiên bản đã cắt.
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
cảm ơn rất nhiều !! – user1198133
0
Bạn có thể tải các hình ảnh trên một thẻ canvas và sau đó bạn có thể làm tất cả các bản vẽ bạn thích trên vải đó.
Các vấn đề liên quan
- 1. Đặt hình ảnh làm màu của đa giác
- 2. Đa giác vùng đệm RGeo quá nhỏ
- 3. Cắt đa giác: Chỉ vùng "có thể xem"
- 4. Đa giác CSS3 không có hình ảnh, làm cách nào?
- 5. Canvas hình ảnh Delphi ... vẽ một khu vực (hình tam giác, hình chữ nhật, đa giác)
- 6. Nhận tất cả tọa độ đa giác của khu vực hình ảnh cụ thể?
- 7. Canvas HTML5, hình ảnh trên/trong đa giác có thể?
- 8. Tạo đa giác đầy hình ảnh lát gạch trong C#
- 9. Cách xác định đa giác bằng opencv hoặc javacv?
- 10. Tìm trục trung gian của đa giác bằng C#
- 11. Chia đa giác đơn giản, đa giác thành đa giác hoặc đa giác đơn giản thực sự
- 12. Chuyển đổi đa giác thành hình tam giác
- 13. Sao chép vùng của một hình ảnh sang vùng khác trong một hình ảnh khác
- 14. Tính toán vùng đa giác lồi của Trái Đất cho vĩ độ và kinh độ
- 15. Tính Hình chữ nhật Vạch ở Góc của Đa giác
- 16. Có cách nào để tạo hình đa giác phức tạp từ bất kỳ hình ảnh nào trong CSS để sử dụng trong thuộc tính vùng không?
- 17. chọn một phần của hình ảnh (cắt)
- 18. vẽ đa giác bằng tờ rơi js
- 19. Chọn vùng cần chụp bằng cách sử dụng chuột
- 20. Cách chụp ảnh màn hình bằng FireMonkey (đa nền tảng)
- 21. Vẽ các vùng được chọn của UIImage
- 22. Triangulation đa giác
- 23. Đa giác Tam giác Tối ưu hóa số
- 24. Điểm gần nhất của hai đa giác
- 25. Làm cách nào để tạo hình đa giác trong KML được định vị trong không khí?
- 26. Khoảng cách từ điểm đến đa diện hoặc đa giác
- 27. Sắp xếp các điểm của đa giác
- 28. SciPy Tạo Mặt nạ đa giác 2D
- 29. SKPhysicsBody của SpriteKit với công cụ trợ giúp đa giác
- 30. Phát hiện vùng sáng hình chữ nhật trong Hình ảnh bằng cách sử dụng OpenCv
Có thể bạn sẽ phải tự viết, bằng cách vẽ các đường giữa các điểm mà người dùng nhấp vào. Đó không phải là khó khăn khủng khiếp nhưng một chục dòng rất cụ thể cho vấn đề của bạn. Nó có thể phụ thuộc vào những gì bạn muốn làm với đa giác của bạn. –