html5canvas和JavaScript怎样实现当地截图-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了JavaScript+html5canvas实现当地截图教程，对截图功能感乐趣的小同伴们可以参照一下这篇文章主要介绍了JavaScript+html5 canvas实现当地截图教程，对截图功能感乐趣的小同伴们可以参照一下

比来有工夫理解了下html5的各API，发明新浪微博的头像设定是运用canvas实现截图的，加以前段工夫理解了下html5的File API运用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。
下面奉上我本人写的一个demo，代码写得比拼少，许多细节不会处置。要是有不得当的地方恳请指教，感谢啦 ^_^ ^_^
功能实现步奏：

一、猎取文件，读取文件并生成url
二、依据容器的大小运用canvas绘制图片
三、运用canvas绘制遮罩层
四、运用canvas绘制裁剪后的图片
五、拖动裁剪框，从新裁剪图片

PS：由于是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留神this对象喔
首先步：猎取文件，读取文件并生成url
在这里我是运用html5里面的file api处置当地文件上传的，由于这样可以不需要把图片上传到办事器，再由办事器返回图片地址来做预览，细致请看：运用File API 之FileReader实现文件上传

document.getElementById('post_file').onchange = function() {
  var fileList = this.files[0];
  var oFReader = new FileReader();
  oFReader.readAsDataURL(fileList);
  oFReader.onload = function (oFREvent) { //当读取操纵成功完成时调取.
    postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
  };
}

第二步：依据容器的大小运用canvas绘制图片

在上一步运用File API的FileReader已经得到了需要上传图片的地址了，接下来需要运用canvas把这个图片绘制出来。这里为何不直接插入img而用canvas从新绘制呢，这不是画蛇添足了吗？其实否则。要是用img直接插入页面，就没法自顺应居中了，要是运用canvas绘制图片，不光能使图片自顺应居中以及能等比例缩放，而且利便把图片的坐标，尺寸大小传给后来的遮罩层，这样能依据图片的坐标以及图片的尺寸大小来绘制遮罩层。
这里略微要注意下canvas的drawImage办法。

paintImage: function(url) {
  var t = this;
  var createCanvas = t.getImage.getContext("2d");
  var img = new Image();
  img.src = url;
  img.onload = function(){
 
    //等比例缩放图片(要是图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
    //要是图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
    //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
    if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
      t.imgWidth = img.width;
      t.imgHeight = img.height;
 
    } else {
      var pWidth = img.width / (img.height / t.regional.offsetHeight);
      var pHeight = img.height / (img.width / t.regional.offsetWidth);
      t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
      t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
    }
    //图片的坐标
    t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
    t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';
     
    t.getImage.height = t.imgHeight;
    t.getImage.width = t.imgWidth;
    t.getImage.style.left = t.px;
    t.getImage.style.top = t.py;
 
    createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入配景图片而用canvas绘制图片，是为了调整所需框内图片的大小
    t.imgUrl = t.getImage.toDataURL();//贮存canvas绘制的图片地址
    t.cutImage();
    t.drag();
  };
},

出来的结果是这样的：

//绘制遮罩层：
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = 'block';
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;
 
var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect (0,0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);

第四步：运用canvas绘制裁剪后的图片
在第三步里面，把遮罩层绘制好了，但是遮罩层并没有裁剪的能力，仅仅是用来显示裁剪区域与非裁剪区域的对照罢了，所以这里就开端做裁剪图片的功能了。一样运用到canvas的drawImage办法。

//绘制剪切图片：
t.editPic.height = t.sHeight;
t.editPic.width = t.sWidth;
var ctx = t.editPic.getContext('2d');
var images = new Image();
images.src = t.imgUrl;
images.onload = function(){
  ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
  document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片运用img标签显示出来
}

第五步：拖动裁剪框，从新裁剪图片
运用截图上传头像功能时我们但愿能裁剪到中意的图片，所以裁剪框就需要不绝的变更才得以裁剪出完善的图片。前几步已经把裁剪图片的根本功能做出来了，所以此刻需要做的就是裁剪框跟进鼠标的挪移来实时裁剪图片。

drag: function() {
  var t = this;
  var draging = false;
  var startX = 0;
  var startY = 0;
 
  document.getElementById('cover_box').onmousemove = function(e) {
    //猎取鼠标到配景图片的距离
    var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
    var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
    //推断鼠标可否在裁剪区域里面：
    if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
      this.style.cursor = 'move';
       
      this.onmousedown = function(){
        draging = true;
        //记录上一次截图的坐标
        t.ex = t.sx;
        t.ey = t.sy;
        //记录鼠标按下时候的坐标
        startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
        startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
      }
      window.onmouseup = function() {
        draging = false;
      }
       
      if (draging) {
        //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
        if ( t.ex + (pageX - startX) < 0 ) {
          t.sx = 0;
        } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
          t.sx = t.imgWidth - t.sWidth;
        } else {
          t.sx = t.ex + (pageX - startX);
        };
 
        if (t.ey + (pageY - startY) < 0) {
          t.sy = 0;
        } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
          t.sy = t.imgHeight - t.sHeight;
        } else {
          t.sy = t.ey + (pageY - startY);
        }
 
        t.cutImage();
      }
    } else{
      this.style.cursor = 'auto';
    }
  };
}

大功告成，图片如下：

body{text-align:center;}
#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_edit{margin: 0 auto;display:inline-block;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }

html：　