html5加图片超链接,JavaScript html5 canvas实现图片上画超链接

// logic load image into canvas

// ...

// e.g.

// photo = new Image();

// photo.onload = function() {

// draw photo into canvas when ready

// ctx.drawImage(photo,photoW,photoH);

// };

// load photo into canvas

// photo.src = picURL;

// canvas highlight

var canvas = document.getElementById('canvasFile'),ctx = canvas.getContext('2d'),img = new Image;

var btnDone = document.getElementById('btnDone');

var btnRedo = document.getElementById('btnRedo');

ctx.strokeStyle = '#FF0000';

function DrawDot(x,y) {

var centerX = x;

var centerY = y;

var radius = 2;

ctx.beginPath();

ctx.arc(centerX,centerY,radius,2 * Math.PI,false);

ctx.fillStyle = 'red';

ctx.fill();

ctx.lineWidth = 2;

ctx.strokeStyle = '#FF0000';

ctx.stroke();

}

function startDrawing() {

ctx.drawImage(img,photoH);

canvas.onmousemove = mousemoving;

canvas.onmousedown = mousedownhandle;

canvas.onmouseup = mouseuphandle;

// ## mobile events

//touchstart – to toggle drawing mode “on”

//touchend – to toggle drawing mode “off”

//touchmove – to track finger position,used in drawing

canvas.addEventListener('touchmove',touchmove,false);

canvas.addEventListener('touchend',mouseuphandle,false);

btnRedo.onclick = function (e) {

ctx.clearRect(0,ctx.width,ctx.height);

ctx.drawImage(photo,photoH);

savedrawing();

}

}

function savedrawing(e) {

var image = document.getElementById('canvasFile').toDataURL("image/jpeg");

image = image.replace('data:image/jpeg;base64,','');

$("#imgNric1").val(image);

};

function mousemoving(e) {

if (drawing) {

mousedownhandle(e);

}

}

var drawing = false;

function mousedownhandle(e) {

drawing = true;

var r = canvas.getBoundingClientRect(),x = e.clientX - r.left,y = e.clientY - r.top;

DrawDot(x,y);

}

function mouseuphandle(e) {

savedrawing();

e.preventDefault();

drawing = false;

}

mobile touch events

function touchmove(e) {

if (e.clientX > 800) {

mousedownhandle(e);

return;

}

var r = canvas.getBoundingClientRect(),//event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;

x = e.changedTouches[0].pageX - r.left,y = e.changedTouches[0].pageY - r.top;

DrawDot(x,y);

e.preventDefault();

}