H5 在图片上画超链接

1. html

[html]  view plain  copy

1. <canvas id="canvasFile" style="margin-top:15px;" width="500" height="400"></canvas>  
2. <input type="button" id="btnRedo" value="Re-Draw" class="btn btn-warning"/>  
   

2. javascript 

[javascript]  view plain  copy

1. var photoW = 400;  
2.         var photoH = 300;  
3.         var photo;  
4.                     
5.         // logic load image into canvas  
6.         // ...  
7.         // e.g.   
8.         // photo = new Image();  
9.         // photo.onload = function() {  
10.         // draw photo into canvas when ready  
11.         // ctx.drawImage(photo, 0, 0, photoW, photoH);  
12.         // };  
13.         // load photo into canvas  
14.         // photo.src = picURL;            
15.           
16.  // canvas highlight  
17.         var canvas = document.getElementById('canvasFile'),  
18.             ctx = canvas.getContext('2d'),  
19.             img = new Image;  
20.         var btnDone = document.getElementById('btnDone');  
21.         var btnRedo = document.getElementById('btnRedo');  
22.   
23.         ctx.strokeStyle = '#FF0000';        
24.   
25.         function DrawDot(x, y) {  
26.             var centerX = x;  
27.             var centerY = y;  
28.             var radius = 2;    
29.   
30.             ctx.beginPath();  
31.             ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  
32.             ctx.fillStyle = 'red';  
33.             ctx.fill();  
34.             ctx.lineWidth = 2;  
35.             ctx.strokeStyle = '#FF0000';  
36.             ctx.stroke();  
37.         }   
38.   
39.         function startDrawing() {  
40.             ctx.drawImage(img, 0, 0, photoW, photoH);  
41.             canvas.onmousemove = mousemoving;  
42.             canvas.onmousedown = mousedownhandle;  
43.             canvas.onmouseup = mouseuphandle;  
44.             // ## mobile events  
45.             //touchstart – to toggle drawing mode “on”  
46.             //touchend – to toggle drawing mode “off”  
47.             //touchmove – to track finger position, used in drawing  
48.             canvas.addEventListener('touchmove', touchmove, false);  
49.             canvas.addEventListener('touchend', mouseuphandle, false);    
50.   
51.             btnRedo.onclick = function (e) {  
52.                 ctx.clearRect(0, 0, ctx.width, ctx.height);  
53.                 ctx.drawImage(photo, 0, 0, photoW, photoH);  
54.                 savedrawing();  
55.             }  
56.         }  
57.         function savedrawing(e) {  
58.             var image = document.getElementById('canvasFile').toDataURL("image/jpeg");  
59.             image = image.replace('data:image/jpeg;base64,', '');  
60.             $("#imgNric1").val(image);  
61.         };   
62.   
63.         function mousemoving(e) {  
64.             if (drawing) {  
65.                 mousedownhandle(e);  
66.             }  
67.         }  
68.    
69.         var drawing = false;  
70.     
71.         function mousedownhandle(e) {  
72.             drawing = true;  
73.             var r = canvas.getBoundingClientRect(),  
74.                 x = e.clientX - r.left,  
75.                 y = e.clientY - r.top;  
76.   
77.     
78.             DrawDot(x, y);  
79.         }  
80.   
81.   
82.         function mouseuphandle(e) {  
83.             savedrawing();  
84.             e.preventDefault();  
85.             drawing = false;  
86.               
87.         }  
88.   
89.   
90.   
91.   
92.          mobile touch events  
93.         function touchmove(e) {  
94.             if (e.clientX > 800) {  
95.                 mousedownhandle(e);  
96.                 return;  
97.             }  
98.             var r = canvas.getBoundingClientRect(),  
99.                 //event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;  
100.                 x = e.changedTouches[0].pageX - r.left,  
101.                 y = e.changedTouches[0].pageY - r.top;  
102.     
103.             DrawDot(x, y);  
104.             e.preventDefault();  
105.         }