你的位置:首页 > Java教程

[Java教程]canvas头像上传截取功能


 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas)
 本程序目前在谷歌浏览器和火狐浏览器测试可用,ie浏览器无法支持。
 因为ie的安全机制不允许img使用本地路径,所以若想ie支持本程序,必须先将图片上传,然后给img对象上传后的图片地址。
 我在这里没写,是因为暂时没写上传功能的后端代码,并且还不确定有没有更好的解决办法。

 

如下是新浪的

代码:

 1 var canvas = document.getElementById('canvas'), 2   context = canvas.getContext('2d'), 3    4   canvas2 = document.getElementById('canvas_dp'), 5   context2 = canvas2.getContext('2d'), 6  7   image = new Image(),//document.getElementById('myimg'), 8    9   imageData, 10   scale,//缩放比例 11    12   rubberbandRectangle = {left:10,top:20,width:180,height:150}, 13   resize = 1; 14   oldRubberbandRectangle = {}; 15   dragging = false, 16   extending = false, 17   mousedown = {}; 18  19 // Functions..................................................... 20 function windowToCanvas(canvas, x, y) { 21  var canvasRectangle = canvas.getBoundingClientRect(); 22   23  return { 24       x: x - canvasRectangle.left, 25       y: y - canvasRectangle.top 26      }; 27 } 28  29 //将截取的图片画在小的canvas中 30 function captureCanvasPixels() { 31   context2.drawImage(image,rubberbandRectangle.left/scale,rubberbandRectangle.top/scale,rubberbandRectangle.width/scale,rubberbandRectangle.height/scale,0,0,180,150); 32 } 33  34  35 function drawRubberband() { 36   context.save(); 37   context.beginPath();//开始新的路径 38     rect(rubberbandRectangle.left, 39      rubberbandRectangle.top, 40      rubberbandRectangle.width, 41      rubberbandRectangle.height); 42   context.fillStyle='rgba(255,255,255,0.5)';          43   addRectanglePath(); 44   context.fill();//填充路径 45   context.fillStyle='rgba(255,255,255,1)';  46    47   captureCanvasPixels();//将选取的图像copy到预览canvas中 48    49   context.beginPath(); 50   context.strokeStyle = '#333333'; 51   context.lineWidth = 1.0; 52   context.arc(rubberbandRectangle.left+rubberbandRectangle.width,rubberbandRectangle.top+rubberbandRectangle.height,5,0,Math.PI*2,true); 53   context.fill();//填充路径 54   context.stroke();//填充路径 55   context.restore(); 56 } 57  58 function rect(x, y, w, h, direction){ 59   if(direction){//逆时针 60     context.moveTo(x, y); 61     context.lineTo(x, y + h); 62     context.lineTo(x + w, y + h); 63     context.lineTo(x + w, y); 64   }else{//顺时针 65     context.moveTo(x, y); 66     context.lineTo(x + w, y); 67     context.lineTo(x + w, y + h); 68     context.lineTo(x, y + h); 69   } 70   context.closePath(); 71 } 72 function addRectanglePath(){ 73   rect(0,0,canvas.width,canvas.height,true); 74 } 75  76 function startDragging(loc){ 77   mousedown.x = loc.x; 78   mousedown.y = loc.y; 79   oldRubberbandRectangle.left = rubberbandRectangle.left; 80   oldRubberbandRectangle.top = rubberbandRectangle.top; 81 } 82 function updateRubberbandRectangle(loc){ 83   var left = oldRubberbandRectangle.left + loc.x-mousedown.x; 84   var top = oldRubberbandRectangle.top + loc.y - mousedown.y; 85   rubberbandRectangle.left = (left<0) ? 0 : left; 86   rubberbandRectangle.top = (top < 0) ? 0: top; 87    88   if(rubberbandRectangle.left + rubberbandRectangle.width > image.width * scale)rubberbandRectangle.left = image.width * scale - rubberbandRectangle.width;  89   if(rubberbandRectangle.top + rubberbandRectangle.height > image.height * scale)rubberbandRectangle.top = image.height * scale - rubberbandRectangle.height; 90   drawRubberband(); 91 } 92 function startExtendSelection(loc){ 93   mousedown.x = loc.x; 94   mousedown.y = loc.y; 95   oldRubberbandRectangle.width = rubberbandRectangle.width; 96   oldRubberbandRectangle.height = rubberbandRectangle.height; 97 } 98 function extendSelection(loc){ 99   var width = parseInt(oldRubberbandRectangle.width) + parseInt(loc.x)-parseInt(mousedown.x);100   var height = parseInt(parseInt(oldRubberbandRectangle.height) * parseInt(width)/parseInt(oldRubberbandRectangle.width));101   102   rubberbandRectangle.width = width;103   rubberbandRectangle.height = height;104   drawRubberband();105 }106 function clearRubberbandRectangle(){107   context.clearRect(0, 0, canvas.width, canvas.height);108   context.putImageData(imageData, 0 ,0);109 }110 111 // Event handlers...............................................112 canvas.onmousedown = function(e){113   e.preventDefault();114   var loc = windowToCanvas(canvas, e.clientX, e.clientY);115   if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){116     dragging = true;117     startDragging(loc);118   }else if((rubberbandRectangle.left + rubberbandRectangle.width - 3) < loc.x && (rubberbandRectangle.top + rubberbandRectangle.height - 3) < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width +3) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height + 3) > loc.y){119     extending = true;120     startExtendSelection(loc);121   }122   123 }124 125 canvas.onmousemove = function (e) {126   e.preventDefault();127  128  var loc = windowToCanvas(canvas, e.clientX, e.clientY);129   if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){130     canvas.style.cursor='move';131     132   }else if((rubberbandRectangle.left + rubberbandRectangle.width - 3) < loc.x && (rubberbandRectangle.top + rubberbandRectangle.height - 3) < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width +3) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height + 3) > loc.y){133     canvas.style.cursor='nw-resize';134     135   }else{136     canvas.style.cursor='';137   }138  139  if (dragging) {140    141     clearRubberbandRectangle();142    updateRubberbandRectangle(loc);143   }144  if(extending){145    canvas.style.cursor='nw-resize';146     clearRubberbandRectangle();147     extendSelection(loc);148   }149 }150 151 canvas.onmouseup = function(e){152   e.preventDefault();153   dragging = false;154   extending = false;155 }156 157 158 159 // Initialization..............................................160 161 var myfileInput = document.getElementById('myfileInput');162 myfileInput.onchange=function(){163   setImage(myfileInput);164 };165 166 167 168 169 function setImage(fileObj){170   if (fileObj.files && fileObj.files[0]) {171     //火狐下,谷歌下都是支持的172     image.src = window.URL.createObjectURL(fileObj.files[0]);173   } else {174     alert('对不起,您的浏览器不支持');175   }176 }177 178 179 180 image.src = '';181 image.onload = function () {182   console.log(image);183   var w,h;184   185   //计算图片缩放比例186   if(image.width>canvas.width){187     console.log(1);188     w = canvas.width;189     h = canvas.width*image.height/image.width190   }else if(image.height>canvas.height){191     console.log(2);192     h = canvas.height;193     w = canvas.height*image.width/mage.height194   }else if(image.width/image.height >= canvas.width/canvas.height){195     console.log(3);196     w = canvas.width;197     h = canvas.width*image.height/image.width;198   }else if(image.width/image.height < canvas.width/canvas.height){199     console.log(4);200     w = canvas.height*image.width/image.height201     h = canvas.height;202   }203   scale = w/image.width;204   context.clearRect(0,0,canvas.width,canvas.height);205  context.drawImage(image, 0, 0,w, h); 206  console.log( w+':'+h+'###'+canvas.width+':'+canvas.height);207  imageData= context.getImageData(0, 0, canvas.width, canvas.height);208   drawRubberband();209 };

html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>CarlZhang</title>  </head>  <body>    <div name="container" style="height:380px;width:330px;border:#92B8B1 1px solid;text-align:center">      <canvas id="canvas" style="z-index: 9999; " height="359" width="324"></canvas>    </div>    <!--预览-->    <div name="display" style="height:150px;width:180px;border:#92B8B1 1px solid;position:absolute;left:380px;top:110px;">      <canvas id="canvas_dp" style="z-index: 9999; " height="150" width="180"></canvas>    </div>        <!--上传-->    <input id="myfileInput" type="file" accept="image/gif, image/jpeg, image/x-png"/>        <script src="js/cavas_img_upload.js" type="text/javascript" charset="utf-8"></script>  </body></html>