html5 canvas 处理图片
第一个问题，C:fakepath 图片路径问题。
function preImg(sourceId) {
if (typeof FileReader === 'undefined') {
alert('Your browser does not support FileReader...');
return;
}
var reader = new FileReader();
reader.onload = function(e) {
//图片宽高比例
var c=document.getElementById("bg");
var cxt=c.getContext("2d");
img.src=this.result;
var p = getrealpoint(c,img);
cxt.clearRect(0,0,c.width,c.height);
imgmax.l=(c.width-imgmax.x)/2;imgmax.t=(c.height-imgmax.y)/2;
cxt.drawImage(img,imgmax.l,imgmax.t,imgmax.x,imgmax.y);
}
reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}
第二个问题，兼容pc和移动端
var ismobile = !!navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i) var touchEvents={ touchstart:"touchstart", touchmove:"touchmove", touchend:"touchend", touchcancle:"touchcancle", initTouchEvents:function(){ if(!ismobile){ this.touchstart="mousedown"; this.touchmove="mousemove"; this.touchend="mouseup"; this.touchcancle="mouseleave"; } } };
然后就没问题了，处理鼠标或触摸事件在canvas上绘图
obj.addEventListener(touchEvents.touchstart, function(e) { isdown=true; //只处理两个以下的触摸点 if(e.touches && e.touches.length<2){ downx=e.touches[0].clientX; downy=e.touches[0].clientY; }else{ downx=e.clientX; downy=e.clientY; } e.preventDefault(); e.stopPropagation(); }, false); obj.addEventListener(touchEvents.touchend, function(e) { if(isdown){ imgmax.l=movel; imgmax.t=movet; } isdown=false; e.preventDefault(); e.stopPropagation(); }, false); obj.addEventListener(touchEvents.touchmove, function(e) { if(isdown){ var cxt=c.getContext("2d"),sx=0,sy=0; cxt.clearRect(0,0,c.width,c.height); if(e.touches){ sx=downx-e.touches[0].clientX; sy=downy-e.touches[0].clientY; movex=downx-e.touches[0].clientX; movey=e.touches[0].clientY; }else{ sx=downx-e.clientX; sy=downy-e.clientY; movex=downx-e.clientX; movey=e.clientY; } cxt.drawImage(img,imgmax.l-sx,imgmax.t-sy,imgmax.x,imgmax.y); movel=imgmax.l-sx; movet=imgmax.t-sy; } e.preventDefault(); e.stopPropagation(); }, false); obj.addEventListener(touchEvents.touchcancle,function(e){ if(isdown){ imgmax.l=movel; imgmax.t=movet; } isdown=false; e.preventDefault(); e.stopPropagation(); })
注意canvas必须是内联高度和宽度，不然你会发现像素比例跟实际很大差别
<body> <input type="file" name="imgOne" id="imgOne" accept="image/*" onchange="preImg(this.id);" /> <div id="bgdiv"> <canvas id="bg" style="position:absolute;z-index:1000"> </canvas> <canvas id="tp" style="position:absolute;z-index:1001"> </canvas> </div> </body>
效果图：
后边用的时候会在精细一下代码，抛砖引玉吧