【canvas头像】使用canvas实现仿新浪微博头像截取上传功能-canvas头像裁剪

var canvas=document.getElementById('canvas'),
    context=canvas.getContext('d'),
    canvas=document.getElementById('canvas_dp'),
    context=canvas.getContext('d'),
    image=new Image(),//document.getElementById('myimg'),
    imageData,
   scale,//缩放比例
   rubberbandRectangle={left:,top:,width:,height:},
   resize=;
   oldRubberbandRectangle={};
   dragging=false,
   extending=false,
   mousedown={};
 // Functions.....................................................
 function windowToCanvas(canvas, x, y) {
   var canvasRectangle=canvas.getBoundingClientRect();
   return {
        x: x - canvasRectangle.left,
        y: y - canvasRectangle.top
      };
 }
 //将截取的图片画在小的canvas中
 function captureCanvasPixels() {
    context.drawImage(image,rubberbandRectangle.left/scale,rubberbandRectangle.top/scale,rubberbandRectangle.width/scale,rubberbandRectangle.height/scale,,,,);
 }
 function drawRubberband() {
   context.save();
   context.beginPath();//开始新的路径
     rect(rubberbandRectangle.left,
      rubberbandRectangle.top,
      rubberbandRectangle.width,
      rubberbandRectangle.height);
   context.fillStyle='rgba(,,,.)';         
   addRectanglePath();
   context.fill();//填充路径
   context.fillStyle='rgba(,,,)'; 
   captureCanvasPixels();//将选取的图像copy到预览canvas中
   context.beginPath();
   context.strokeStyle='#';
   context.lineWidth=.;
   context.arc(rubberbandRectangle.left+rubberbandRectangle.width,rubberbandRectangle.top+rubberbandRectangle.height,,,Math.PI*,true);
   context.fill();//填充路径
   context.stroke();//填充路径
   context.restore();
 }
 function rect(x, y, w, h, direction){
   if(direction){//逆时针
     context.moveTo(x, y);
     context.lineTo(x, y + h);
     context.lineTo(x + w, y + h);
     context.lineTo(x + w, y);
   }else{//顺时针
     context.moveTo(x, y);
     context.lineTo(x + w, y);
     context.lineTo(x + w, y + h);
     context.lineTo(x, y + h);
   }
   context.closePath();
 }
 function addRectanglePath(){
   rect(,,canvas.width,canvas.height,true);
 }
 function startDragging(loc){
   mousedown.x=loc.x;
   mousedown.y=loc.y;
   oldRubberbandRectangle.left=rubberbandRectangle.left;
   oldRubberbandRectangle.top=rubberbandRectangle.top;
 }
 function updateRubberbandRectangle(loc){
   var left=oldRubberbandRectangle.left + loc.x-mousedown.x;
   var top=oldRubberbandRectangle.top + loc.y - mousedown.y;
   rubberbandRectangle.left=(left<) ? : left;
   rubberbandRectangle.top=(top < ) ? : top;
   if(rubberbandRectangle.left + rubberbandRectangle.width > image.width * scale)rubberbandRectangle.left=image.width * scale - rubberbandRectangle.width; 
   if(rubberbandRectangle.top + rubberbandRectangle.height > image.height * scale)rubberbandRectangle.top=image.height * scale - rubberbandRectangle.height;
   drawRubberband();
 }
 function startExtendSelection(loc){
   mousedown.x=loc.x;
   mousedown.y=loc.y;
   oldRubberbandRectangle.width=rubberbandRectangle.width;
   oldRubberbandRectangle.height=rubberbandRectangle.height;
 }
 function extendSelection(loc){
   var width=parseInt(oldRubberbandRectangle.width) + parseInt(loc.x)-parseInt(mousedown.x);
   var height=parseInt(parseInt(oldRubberbandRectangle.height) * parseInt(width)/parseInt(oldRubberbandRectangle.width));
   rubberbandRectangle.width=width;
   rubberbandRectangle.height=height;
   drawRubberband();
 }
 function clearRubberbandRectangle(){
   context.clearRect(, , canvas.width, canvas.height);
   context.putImageData(imageData, ,);
 }
 // Event handlers...............................................
 canvas.onmousedown=function(e){
   e.preventDefault();
   var loc=windowToCanvas(canvas, e.clientX, e.clientY);
   if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){
     dragging=true;
     startDragging(loc);
   }else if((rubberbandRectangle.left + rubberbandRectangle.width - ) < loc.x && (rubberbandRectangle.top + rubberbandRectangle.height - ) < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width +) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height + ) > loc.y){
     extending=true;
     startExtendSelection(loc);
   }
 }
 canvas.onmousemove=function (e) {
  e.preventDefault();
  var loc=windowToCanvas(canvas, e.clientX, e.clientY);
   if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){
     canvas.style.cursor='move';
   }else if((rubberbandRectangle.left + rubberbandRectangle.width - ) < loc.x && (rubberbandRectangle.top + rubberbandRectangle.height - ) < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width +) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height + ) > loc.y){
     canvas.style.cursor='nw-resize';
   }else{
     canvas.style.cursor='';
   }
  if (dragging) {
    clearRubberbandRectangle();
    updateRubberbandRectangle(loc);
   }
  if(extending){
    canvas.style.cursor='nw-resize';
    clearRubberbandRectangle();
    extendSelection(loc);
  }
 }
 canvas.onmouseup=function(e){
   e.preventDefault();
   dragging=false;
   extending=false;
 }
 // Initialization..............................................
 var myfileInput=document.getElementById('myfileInput');
 myfileInput.onchange=function(){
   setImage(myfileInput);
 };
 function setImage(fileObj){
   if (fileObj.files && fileObj.files[]) {
     //火狐下，谷歌下都是支持的
     image.src=http://www.jb51.net/article/window.URL.createObjectURL(fileObj.files[]);
   } else {
     alert('对不起，您的浏览器不支持');
   }
 }
 image.src='http://www.jb51.net/article/';
 image.onload=function () {
   console.log(image);
   var w,h;
   //计算图片缩放比例
   if(image.width>canvas.width){
     console.log();
     w=canvas.width;
     h=canvas.width*image.height/image.width
   }else if(image.height>canvas.height){
     console.log();
     h=canvas.height;
     w=canvas.height*image.width/mage.height
   }else if(image.width/image.height >=canvas.width/canvas.height){
     console.log();
     w=canvas.width;
     h=canvas.width*image.height/image.width;
   }else if(image.width/image.height < canvas.width/canvas.height){
     console.log();
     w=canvas.height*image.width/image.height
     h=canvas.height;
   }
   scale=w/image.width;
   context.clearRect(,,canvas.width,canvas.height);
  context.drawImage(image, , ,w, h); 
  console.log( w+':'+h+'###'+canvas.width+':'+canvas.height);
  imageData=context.getImageData(, , canvas.width, canvas.height);
   drawRubberband();
 };

关于使用canvas实现仿新浪微博头像截取上传功能的用户互动如下：

　　相关问题：如何使用HTML5实现利用摄像头拍照上传功能

　　答：HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。 1、 视频流 HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以... >>详细

　　相关问题：如何用jsp实现 截取上传的图片做头像，要截取的大...

　　答：这个功能不能用jsp实现，只能用flash或者silverlight实现，网上应该有写好的代码下载的，有其他问题可以继续追问 >>详细

　　相关问题：有没有js先实现截图，截完图后再上传到服务器的插件？

　　答：使用canvas，可以轻松解决这问题。 但是上传的是图片base64位数据。需要在后台保存为指定格式的图片 >>详细