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实现文件上传

调用. postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数 }; }　　

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

在上一步使用File API的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。这里稍微要注意下canvas的drawImage方法。

//等比例缩放<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>(如果<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>宽高都比容器小，则绘制的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>宽高 = 原<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽高。)
//如果<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
//t.imgWidth：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽度；t.imgHeight：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的高度；t.px：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的X轴；t.py：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的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;
}
//<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的坐标
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,t.imgWidth,t.imgHeight);//没用直接插入背景<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>而用canvas绘制<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>，是为了调整所需框内<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的大小
t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>地址
t.cutImage();
t.drag();

};
},　

出来的效果是这样的：

第三步：使用canvas绘制遮罩层

在上一步中已经把需要裁剪的背景图绘制出来了，现在需要根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比。（这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。不知道这一步能不能直接去掉？有知道的童鞋麻烦告诉下我。）

Box.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.5)";
cover.fillRect (0,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.sWidth,t.sWidth); //裁剪图片 document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来 }

第五步：拖动裁剪框，重新裁剪图片

使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片。

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';
}

};
}　　

大功告成，图片如下：

有童鞋指出，每移动一下鼠标就裁剪一张图片不是很耗性能吗，为什么不用background-position来做预览效果保存的时候才用canvas裁出来？一听觉得这建议很有道理，所以就在第四步把代码稍微改动了一下。鼠标移动的时候的预览效果是改变图片的background-position，点击保存按钮的时候才裁剪图片，把裁剪下来的图片生成新的url就可以传给服务器啦~~ 以下代码是改正过来的，大家有什么其它好的建议欢迎指出来喔 ^_^ ^_^ demo完整代码如下：注意：因为用的是seajs写的，所以稍微留意下文件的加载情况啦 css：

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：　

js：

'use strict';

var postFile = {
init: function(options) {
var t = this;
t.regional = document.getElementById('label');
t.getImage = document.getElementById('get_image');
t.clipPic = document.getElementById('edit_pic');
t.coverBox = document.getElementById('cover_Box');
t.achieve = document.getElementById('show_edit');

  t.clipPos = options.clipPos;

  //初始化<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>基本参数
  t.bgPagePos = {     
    x: 0,y: 0,height: 0,width: 0
  };

  //传进<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>
  document.getElementById('post_file').addEventListener("change",t.handleFiles,false);

  //点击保存按钮后再裁剪<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>
  document.getElementById('save_button').onclick = function() {

    //绘制剪切后的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>：
    t.clipPic.height = t.clipPos.height;
    t.clipPic.width = t.clipPos.width;

    var ctx = t.clipPic.getContext('2d');
    var images = new Image();
    images.src = t.imgUrl;
    images.onload = function(){

      //drawImage(images,相对于裁剪<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的X,相对于裁剪<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的Y,裁剪的高度,裁剪的宽度,<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在画布的X,<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在画布的Y,<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在画布多高,<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在画布多宽);
      ctx.drawImage(images,t.clipPos.x,t.clipPos.y,t.clipPos.height,t.clipPos.width,t.clipPos.width); //裁剪<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>

      document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
    }
  };

  t.drag();
},handleFiles: function() {

  var fileList = this.files[0];
  var oFReader = new FileReader();

  //读取<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a><a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>
  oFReader.readAsDataURL(fileList);

  //当读取操作成功完成时<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>.
  oFReader.onload = function (oFREvent) { 

    //把预览<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>URL传给<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
    postFile.paintImage(oFREvent.target.result);
  };
},paintImage: function(url) {
  var t = this;
  var createCanvas = t.getImage.getContext("2d");

  var img = new Image();
  img.src = url;

  //把传进来的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>进行等比例缩放
  img.onload = function(){
    //等比例缩放<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>(如果<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>宽高都比容器小，则绘制的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>宽高 = 原<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽高。)
    //如果<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放

    //t.bgPagePos.width：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的宽度;
    //t.bgPagePos.height：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的高度;
    //t.bgPagePos.x：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的X轴;
    //t.bgPagePos.y：绘制后<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的Y轴
    if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
      t.bgPagePos.width = img.width;
      t.bgPagePos.height = img.height;

    } else {
      var pWidth = img.width / (img.height / t.regional.offsetHeight);
      var pHeight = img.height / (img.width / t.regional.offsetWidth);

      t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
      t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight;
    }

    //<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的坐标
    t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2 + 'px';
    t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2 + 'px';

    t.getImage.height = t.bgPagePos.height;
    t.getImage.width = t.bgPagePos.width;
    t.getImage.style.left = t.bgPagePos.x;
    t.getImage.style.top = t.bgPagePos.y;

    createCanvas.drawImage(img,t.bgPagePos.width,t.bgPagePos.height);//没用直接插入背景<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>而用canvas绘制<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>，是为了调整所需框内<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的大小

    t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>地址

    t.clipImg();
  };
},clipImg: function() {
  var t = this;

  //绘制遮罩层：
  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.height = t.bgPagePos.height;
  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.width = t.bgPagePos.width;
  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.style.display = 'block';
  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.style.left = t.bgPagePos.x;
  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.style.top = t.bgPagePos.y;

  var cover = t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.getContext("2d");
  cover.fillStyle = "rgba(0,0.5)";
  cover.fillRect (0,t.bgPagePos.height);
  cover.clearRect(t.clipPos.x,t.clipPos.width);

  t.achieve.style.background = 'url(' + t.imgUrl + ')' + -t.clipPos.x + 'px ' + -t.clipPos.y + 'px no-repeat';
  t.achieve.style.height = t.clipPos.height + 'px';
  t.achieve.style.width = t.clipPos.width + 'px';
},drag: function() {
  var t = this;
  var draging = false;
  var _startPos = null;

  t.cover<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.onmousemove = function(e) {
    e = e || window.event;

    if ( e.pageX == null && e.clientX != null ) {

      var doc = document.documentElement,body = document.body;

      e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
      e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop);
    }

    //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>鼠标到背景<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的距离
    var _mousePos = {
      left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
    }

    //判断鼠标是否在裁剪区域里面：
    if ( _mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x + t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y + t.clipPos.height ) {
      this.style.cursor = 'move';

      this.onmousedown = function(){
        draging = true;
        //记录上一次截图的坐标
        t.ex = t.clipPos.x; 
        t.ey = t.clipPos.y;

        //记录鼠标按下时候的坐标
        _startPos = {
          left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
        }
      }

      if (draging) {
        //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
        if ( t.ex + ( _mousePos.left - _startPos.left ) < 0 ) {
          t.clipPos.x = 0;
        } else if ( t.ex + ( _mousePos.left - _startPos.left ) + t.clipPos.width > t.bgPagePos.width ) {
          t.clipPos.x = t.bgPagePos.width - t.clipPos.width;
        } else {
          t.clipPos.x = t.ex + ( _mousePos.left - _startPos.left );
        };

        if (t.ey + ( _mousePos.top - _startPos.top ) < 0) {
          t.clipPos.y = 0;
        } else if ( t.ey + ( _mousePos.top - _startPos.top ) + t.clipPos.height > t.bgPagePos.height ) {
          t.clipPos.y = t.bgPagePos.height - t.clipPos.height;
        } else {
          t.clipPos.y = t.ey + ( _mousePos.top - _startPos.top );
        }

        t.clipImg();
      }

      document.body.onmouseup = function() {
        draging = false;
        document.onmousemove = null;
        document.onmouseup = null;
      }
    } else{
      this.style.cursor = 'auto';
    }
  };
}

}
return postFile;
});

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/js/50223.html

JavaScript+html5 canvas实现本地截图教程

第一步：获取文件，读取文件并生成url

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

第三步：使用canvas绘制遮罩层

第四步：使用canvas绘制裁剪后的图片

第五步：拖动裁剪框，重新裁剪图片

猜你在找的JavaScript相关文章