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

2023-09-22 20:50:08 323

varphotoW=400; varphotoH=300; varphoto; //logicloadimageintocanvas //... //e.g. //photo=newImage(); //photo.onload=function(){ //drawphotointocanvaswhenready //ctx.drawImage(photo,0,0,photoW,photoH); //}; //loadphotointocanvas //photo.src=picURL; //canvashighlight varcanvas=document.getElementById('canvasFile'), ctx=canvas.getContext('2d'), img=newImage; varbtnDone=document.getElementById('btnDone'); varbtnRedo=document.getElementById('btnRedo'); ctx.strokeStyle='#FF0000'; functionDrawDot(x,y){ varcenterX=x; varcenterY=y; varradius=2; ctx.beginPath(); ctx.arc(centerX,centerY,radius,0,2*Math.PI,false); ctx.fillStyle='red'; ctx.fill(); ctx.lineWidth=2; ctx.strokeStyle='#FF0000'; ctx.stroke(); } functionstartDrawing(){ ctx.drawImage(img,0,0,photoW,photoH); canvas.onmousemove=mousemoving; canvas.onmousedown=mousedownhandle; canvas.onmouseup=mouseuphandle; //##mobileevents //touchstart–totoggledrawingmode“on” //touchend–totoggledrawingmode“off” //touchmove–totrackfingerposition,usedindrawing canvas.addEventListener('touchmove',touchmove,false); canvas.addEventListener('touchend',mouseuphandle,false); btnRedo.onclick=function(e){ ctx.clearRect(0,0,ctx.width,ctx.height); ctx.drawImage(photo,0,0,photoW,photoH); savedrawing(); } } functionsavedrawing(e){ varimage=document.getElementById('canvasFile').toDataURL("image/jpeg"); image=image.replace('data:image/jpeg;base64,',''); $("#imgNric1").val(image); }; functionmousemoving(e){ if(drawing){ mousedownhandle(e); } } vardrawing=false; functionmousedownhandle(e){ drawing=true; varr=canvas.getBoundingClientRect(), x=e.clientX-r.left, y=e.clientY-r.top; DrawDot(x,y); } functionmouseuphandle(e){ savedrawing(); e.preventDefault(); drawing=false; } ////mobiletouchevents functiontouchmove(e){ if(e.clientX>800){ mousedownhandle(e); return; } varr=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(); }

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

热门推荐

随机推荐