[英]How to select a polygonal area of an image using JavaScript / jQuery?
[英]default polygonal area of an image using JavaScript / jQuery on load of page
我有一個圖像,我想像這樣在圖像上加載多邊形區域:
我收到一份參考表格,網址為: http : //jsfiddle.net/MFELx/
但是它僅在我多次單擊圖像時發生,但是我的要求是,如果我默認情況下加載頁面上的幾個節點出現在頁面上,並且我可以通過代碼增加或減少或更改軸。
小提琴中的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 : 500, height: 500});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'img/1370800.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 = 500; // 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 width=" 500" height="500" src="img/1370800.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();
});
這需要在畫布內進行對象操作...我建議使用createjs。
在這里,您可以...應用程序的更新版本( fiddle ):
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
$(canvas).click(onClick);
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
});
stage = new createjs.Stage("canvas");
var img = new createjs.Bitmap(imageObj);
stage.addChild(img);
points = new createjs.Container();
stage.mouseEnabled = true;
stage.addChild(points);
stage.update();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var paint, stage, points;
function drag(evt) {
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
stage.update();
}
function onClick(e) {
var mouseX = e.clientX;
var mouseY = e.clientY;
clickX.push(mouseX);
clickY.push(mouseY);
redraw();
}
function redraw() {
points.removeAllChildren();
for (var i = 0; i < clickX.length; i++) {
var point = new createjs.Shape();
point.graphics.beginFill('#df4b26').drawCircle(0, 0, 6);
point.x = clickX[i];
point.y = clickY[i];
points.addChild(point);
point.on("pressmove", drag);
}
stage.update();
}
$('#generate').click(function () {
$(".clipParent").empty();
var resImg = $(imageObj).clone();
$(".clipParent").prepend(resImg);
var arr = [];
for (var i = 0; i < clickX.length; i++) {
arr.push(clickX[i]);
arr.push(clickY[i]);
}
resImg.attr("data-polyclip", arr.join(", "));
clickX = [];
clickY = [];
redraw();
polyClip.init();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.