html5canvas和JavaScript怎么實(shí)現(xiàn)本地截圖-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)html5 canvas和JavaScript怎么實(shí)現(xiàn)本地截圖，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),市中企業(yè)網(wǎng)站建設(shè),市中品牌網(wǎng)站建設(shè),網(wǎng)站定制,市中網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,市中網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

最近有時(shí)間了解了下html5的各API，發(fā)現(xiàn)新浪微博的頭像設(shè)置是使用canvas實(shí)現(xiàn)截圖的，加之前段時(shí)間了解了下html5的File API使用File API 之FileReader實(shí)現(xiàn)文件上傳《JavaScript File API文件上傳預(yù)覽》，更加覺得html5好玩了，想著也試試寫寫這功能權(quán)當(dāng)學(xué)習(xí)canvas吧。
下面奉上我自己寫的一個(gè)demo，代碼寫得比較少，很多細(xì)節(jié)不會(huì)處理。如果有不得當(dāng)?shù)牡胤綉┱?qǐng)指教，謝謝啦 ^_^ ^_^
功能實(shí)現(xiàn)步奏：

一、獲取文件，讀取文件并生成url
二、根據(jù)容器的大小使用canvas繪制圖片
三、使用canvas繪制遮罩層
四、使用canvas繪制裁剪后的圖片
五、拖動(dòng)裁剪框，重新裁剪圖片

PS：因?yàn)槭窍劝裠emo寫好再寫這篇文章的，所以分段貼的代碼是直接從代碼里面一段段拷的，要留意this對(duì)象喔
第一步：獲取文件，讀取文件并生成url
在這里我是使用html5里面的file api處理本地文件上傳的，因?yàn)檫@樣可以不需要把圖片上傳到服務(wù)器，再由服務(wù)器返回圖片地址來做預(yù)覽，詳細(xì)請(qǐng)看：使用File API 之FileReader實(shí)現(xiàn)文件上傳

document.getElementById('post_file').onchange = function() {
  var fileList = this.files[0];
  var oFReader = new FileReader();
  oFReader.readAsDataURL(fileList);
  oFReader.onload = function (oFREvent) { //當(dāng)讀取操作成功完成時(shí)調(diào)用.
    postFile.paintImage(oFREvent.target.result);//把預(yù)覽圖片url傳給函數(shù)
  };
}

第二步：根據(jù)容器的大小使用canvas繪制圖片

在上一步使用File API的FileReader已經(jīng)得到了需要上傳圖片的地址了，接下來需要使用canvas把這個(gè)圖片繪制出來。這里為什么不直接插入img而用canvas重新繪制呢，這不是多此一舉了嗎？其實(shí)不然。如果用img直接插入頁面，就無法自適應(yīng)居中了，如果使用canvas繪制圖片，不但能使圖片自適應(yīng)居中以及能等比例縮放，并且方便把圖片的坐標(biāo)，尺寸大小傳給后來的遮罩層，這樣能根據(jù)圖片的坐標(biāo)以及圖片的尺寸大小來繪制遮罩層。
這里稍微要注意下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;
    }
    //圖片的坐標(biāo)
    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繪制圖片，是為了調(diào)整所需框內(nèi)圖片的大小
    t.imgUrl = t.getImage.toDataURL();//儲(chǔ)存canvas繪制的圖片地址
    t.cutImage();
    t.drag();
  };
},

出來的效果是這樣的：

html5 canvas和JavaScript怎么實(shí)現(xiàn)本地截圖

第三步：使用canvas繪制遮罩層在上一步中已經(jīng)把需要裁剪的背景圖繪制出來了，現(xiàn)在需要根據(jù)背景圖的坐標(biāo)和尺寸來繪制遮罩層覆蓋在背景上面，并且使用canvas的clearRect方法清空出一塊裁剪區(qū)域，使之與不裁剪的地方做明暗對(duì)比。
（這里的遮罩層僅僅是用來做顯示效果，并沒有做裁剪圖片的工作。不知道這一步能不能直接去掉？有知道的童鞋麻煩告訴下我。）

//繪制遮罩層：
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繪制裁剪后的圖片
在第三步里面，把遮罩層繪制好了，但是遮罩層并沒有裁剪的能力，僅僅是用來顯示裁剪區(qū)域與非裁剪區(qū)域的對(duì)比而已，所以這里就開始做裁剪圖片的功能了。同樣使用到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標(biāo)簽顯示出來
}

第五步：拖動(dòng)裁剪框，重新裁剪圖片使用截圖上傳頭像功能時(shí)我們希望能裁剪到滿意的圖片，所以裁剪框就需要不停的變動(dòng)才得以裁剪出完美的圖片。前幾步已經(jīng)把裁剪圖片的基本功能做出來了，所以現(xiàn)在需要做的就是裁剪框跟進(jìn)鼠標(biāo)的移動(dòng)來實(shí)時(shí)裁剪圖片。

drag: function() {
  var t = this;
  var draging = false;
  var startX = 0;
  var startY = 0;
 
  document.getElementById('cover_box').onmousemove = function(e) {
    //獲取鼠標(biāo)到背景圖片的距離
    var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
    var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
    //判斷鼠標(biāo)是否在裁剪區(qū)域里面：
    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;
        //記錄上一次截圖的坐標(biāo)
        t.ex = t.sx;
        t.ey = t.sy;
        //記錄鼠標(biāo)按下時(shí)候的坐標(biāo)
        startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
        startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
      }
      window.onmouseup = function() {
        draging = false;
      }
       
      if (draging) {
        //移動(dòng)時(shí)裁剪區(qū)域的坐標(biāo) = 上次記錄的定位 + (當(dāng)前鼠標(biāo)的位置 - 按下鼠標(biāo)的位置)，裁剪區(qū)域不能超出遮罩層的區(qū)域;
        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';
    }
  };
}

大功告成，圖片如下：

html5 canvas和JavaScript怎么實(shí)現(xiàn)本地截圖

有童鞋指出，每移動(dòng)一下鼠標(biāo)就裁剪一張圖片不是很耗性能嗎，為什么不用background-position來做預(yù)覽效果保存的時(shí)候才用canvas裁出來？一聽覺得這建議很有道理，所以就在第四步把代碼稍微改動(dòng)了一下。鼠標(biāo)移動(dòng)的時(shí)候的預(yù)覽效果是改變圖片的background-position，點(diǎn)擊保存按鈕的時(shí)候才裁剪圖片，把裁剪下來的圖片生成新的url就可以傳給服務(wù)器啦~~
以下代碼是改正過來的，大家有什么其它好的建議歡迎指出來喔 ^_^ ^_^
demo完整代碼如下：
注意：因?yàn)橛玫氖莝eajs寫的，所以稍微留意下文件的加載情況啦
css：

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：　

js：

define(function(require, exports, module) {

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

      //初始化圖片基本參數(shù)
      t.bgPagePos = {     
        x: 0,
        y: 0,
        height: 0,
        width: 0
      };

      //傳進(jìn)圖片
      document.getElementById('post_file').addEventListener("change", t.handleFiles, false);

      //點(diǎn)擊保存按鈕后再裁剪圖片
      document.getElementById('save_button').onclick = function() {

        //繪制剪切后的圖片：
        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,相對(duì)于裁剪圖片的X, 相對(duì)于裁剪圖片的Y, 裁剪的高度, 裁剪的寬度, 顯示在畫布的X, 顯示在畫布的Y, 顯示在畫布多高, 顯示在畫布多寬);
          ctx.drawImage(images,t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width); //裁剪圖片
          
          document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
        }
      };

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

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

      //讀取文件內(nèi)容
      oFReader.readAsDataURL(fileList);

      //當(dāng)讀取操作成功完成時(shí)調(diào)用.
      oFReader.onload = function (oFREvent) { 

        //把預(yù)覽圖片URL傳給函數(shù)
        postFile.paintImage(oFREvent.target.result);
      };
    },
    paintImage: function(url) {
      var t = this;
      var createCanvas = t.getImage.getContext("2d");

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

      //把傳進(jìn)來的圖片進(jìn)行等比例縮放
      img.onload = function(){
        //等比例縮放圖片(如果圖片寬高都比容器小，則繪制的圖片寬高 = 原圖片的寬高。)
        //如果圖片的寬度或者高度比容器大，則寬度或者高度 = 容器的寬度或者高度，另一高度或者寬度則等比例縮放

        //t.bgPagePos.width：繪制后圖片的寬度;
        //t.bgPagePos.height：繪制后圖片的高度;
        //t.bgPagePos.x：繪制后圖片的X軸;
        //t.bgPagePos.y：繪制后圖片的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;
        }

        //圖片的坐標(biāo)
        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,0,0,t.bgPagePos.width,t.bgPagePos.height);//沒用直接插入背景圖片而用canvas繪制圖片，是為了調(diào)整所需框內(nèi)圖片的大小
        
        t.imgUrl = t.getImage.toDataURL();//儲(chǔ)存canvas繪制的圖片地址

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

      //繪制遮罩層：
      t.coverBox.height = t.bgPagePos.height;
      t.coverBox.width = t.bgPagePos.width;
      t.coverBox.style.display = 'block';
      t.coverBox.style.left = t.bgPagePos.x;
      t.coverBox.style.top = t.bgPagePos.y;

      var cover = t.coverBox.getContext("2d");
      cover.fillStyle = "rgba(0, 0, 0, 0.5)";
      cover.fillRect (0,0, t.bgPagePos.width, t.bgPagePos.height);
      cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, 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.coverBox.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);
        }

        //獲取鼠標(biāo)到背景圖片的距離
        var _mousePos = {
          left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
          top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
        }

        //判斷鼠標(biāo)是否在裁剪區(qū)域里面：
        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;
            //記錄上一次截圖的坐標(biāo)
            t.ex = t.clipPos.x; 
            t.ey = t.clipPos.y;

            //記錄鼠標(biāo)按下時(shí)候的坐標(biāo)
            _startPos = {
              left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
              top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
            }
          }

          if (draging) {
            //移動(dòng)時(shí)裁剪區(qū)域的坐標(biāo) = 上次記錄的定位 + (當(dāng)前鼠標(biāo)的位置 - 按下鼠標(biāo)的位置)，裁剪區(qū)域不能超出遮罩層的區(qū)域;
            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;
});

關(guān)于html5 canvas和JavaScript怎么實(shí)現(xiàn)本地截圖就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞名稱：html5canvas和JavaScript怎么實(shí)現(xiàn)本地截圖-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/dcpdgh.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

html5canvas和JavaScript怎么實(shí)現(xiàn)本地截圖-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管