页面加载时使用JavaScript / jQuery的图像的默认多边形区域

Question

i have one image i want ploygonal area of image on load like this :

i got one reference form internet : http://jsfiddle.net/MFELx/

but its happening only when i click on the image multiple time but my requirement is if i load the page few node by default come on the page and that i can increse or decrease by code or change the axis..

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

Answer 1

This requires object manipulation inside canvas... I would suggest to use createjs.

Here you go... An updated version of your app ( 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();
});