Implémentation du canevas JavaScript HTML5 des compétences tutoriel_javascript de capture d'écran locale

J'ai récemment eu le temps de découvrir les différentes API de HTML5 et j'ai découvert que le paramètre d'avatar de Sina Weibo utilise Canvas pour réaliser des captures d'écran. De plus, j'ai découvert l'API de fichier de HTML5 il y a quelque temps et j'ai utilisé les API de fichier. FileReader pour télécharger des fichiers 《JavaScript File API File Upload Preview》, Je pense que html5 est encore plus amusant, et je veux essayer d'écrire cette fonction et apprendre le canevas.
Vous trouverez ci-dessous une démo que j'ai écrite moi-même. Le code est relativement petit et je ne sais pas comment gérer de nombreux détails. S'il y a quelque chose d'inapproprié, dites-le-moi, merci ^_^ ^_^
Étapes de mise en œuvre de la fonction :

• 1. Récupérez le fichier, lisez le fichier et générez l'url
  
• 2. Utilisez une toile pour dessiner des images en fonction de la taille du conteneur
  
• 3. Utilisez un canevas pour dessiner le calque de masque
  
• 4. Utilisez une toile pour dessiner l'image recadrée
  
• 5. Faites glisser la zone de recadrage pour recadrer l'image
  

PS : Parce que j'ai écrit la démo avant d'écrire cet article, le code posté dans les sections est copié directement du code section par section. Veuillez faire attention à cet objet
. Étape 1 : Récupérez le fichier, lisez le fichier et générez l'url
Ici, j'utilise l'API de fichier en HTML5 pour gérer le téléchargement de fichiers locaux, car cela élimine le besoin de télécharger l'image sur le serveur, puis le serveur renvoie l'adresse de l'image pour un aperçu. Pour plus de détails, veuillez consulter : Utilisation de FileReader de l'API de fichier pour. mettre en œuvre le téléchargement de fichiers

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传给函数
  };
}　　

Étape 2 : Utilisez la toile pour dessiner des images en fonction de la taille du conteneur

À l'étape précédente, le FileReader utilisant l'API File a obtenu l'adresse de l'image à télécharger. Ensuite, vous devez utiliser Canvas pour dessiner l'image. Pourquoi ne pas insérer directement l'image ici et la redessiner avec du canevas ? Pas vraiment. Si vous utilisez img pour l'insérer directement dans la page, elle ne sera pas centrée de manière adaptative. Si vous utilisez canevas pour dessiner l'image, cela permettra non seulement à l'image d'être centrée et mise à l'échelle de manière adaptative, mais cela facilitera également son centrage. transmettre les coordonnées et la taille de l'image au calque de masque suivant. Cela permet de dessiner le calque de masque en fonction des coordonnées de l'image et de la taille de l'image.
Ici, vous devez prêter un peu d’attention à la méthode drawImage du canevas.

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 &#63; t.regional.offsetWidth : pWidth;
      t.imgHeight = img.height > img.width &#63; 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();
  };
},
　

Le résultat est le suivant :

Étape 3 : Utilisez le canevas pour dessiner le calque du masque
À l'étape précédente, vous avez dessiné l'image d'arrière-plan qui doit être recadrée. Vous devez maintenant dessiner un calque de masque en fonction des coordonnées et de la taille de l'image d'arrière-plan pour couvrir l'arrière-plan, et utiliser la méthode clearRect de canevas. pour effacer une zone de recadrage afin de la contraster avec les zones non recadrées.
(Le calque de masque ici n'est utilisé que pour les effets d'affichage et ne fait pas le travail de recadrage de l'image. Je me demande si cette étape peut être supprimée directement ? Si quelqu'un le sait, dites-le-moi.)

//绘制遮罩层：
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);
　

Étape 4 : Utilisez la toile pour dessiner l'image recadrée
Dans la troisième étape, le calque de masque est dessiné, mais le calque de masque n'a pas la capacité de recadrer. Il est uniquement utilisé pour afficher la comparaison entre la zone recadrée et la zone non recadrée, donc la fonction de recadrage de l'image commence. ici. Utilisez également la méthode drawImage de canvas.

//绘制剪切图片：
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标签显示出来
}

Étape 5 : faites glisser la zone de recadrage et recadrez l'image
Lorsque nous utilisons la fonction d'avatar de téléchargement de capture d'écran, nous espérons recadrer l'image de manière satisfaisante, le cadre de recadrage doit donc être constamment modifié pour recadrer l'image parfaite. La fonction de base de recadrage des images a été complétée dans les étapes précédentes, il ne reste donc plus qu'à suivre le mouvement de la souris pour recadrer l'image en temps réel.

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

大功告成，图片如下：

 

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

<input type="file" name="file" id="post_file">
<button id="save_button">保存</button>
<div id="label">
  <canvas id="get_image"></canvas>
  <p>
    <canvas id="cover_box"></canvas>
    <canvas id="edit_pic"></canvas>
  </p>
</div>
<p>
  <span id="show_edit"></span>
  <span id="show_pic"><img src=""></span>
</p>


<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript">
seajs.use(['_example/fileAPI/index_v2.js'], function(clipFile) {
  clipFile.init({
    clipPos: {    //裁剪框的默认尺寸与定位
      x: 15,
      y: 15,
      height: 100,
      width: 100,
    },
  });
});

</script>　

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;

      //初始化图片基本参数
      t.bgPagePos = {     
        x: 0,
        y: 0,
        height: 0,
        width: 0
      };

      //传进图片
      document.getElementById('post_file').addEventListener("change", t.handleFiles, false);

      //点击保存按钮后再裁剪图片
      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,相对于裁剪图片的X, 相对于裁剪图片的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();

      //读取文件内容
      oFReader.readAsDataURL(fileList);

      //当读取操作成功完成时调用.
      oFReader.onload = function (oFREvent) { 

        //把预览图片URL传给函数
        postFile.paintImage(oFREvent.target.result);
      };
    },
    paintImage: function(url) {
      var t = this;
      var createCanvas = t.getImage.getContext("2d");

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

      //把传进来的图片进行等比例缩放
      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 &#63; t.regional.offsetWidth : pWidth;
          t.bgPagePos.height = img.height > img.width &#63; t.regional.offsetHeight : pHeight;
        }

        //图片的坐标
        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绘制图片，是为了调整所需框内图片的大小
        
        t.imgUrl = t.getImage.toDataURL();//储存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);
        }

        //获取鼠标到背景图片的距离
        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;
});

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