Partager des captures d'écran avec js et coller des compétences de capture d'écran-paste_javascript de plug-in de page Web-js tutoriel-php.cn

Partager des captures d'écran avec js et coller des compétences de capture d'écran-paste_javascript de plug-in de page Web

WBOY

Libérer： 2016-05-16 15:10:08

original

1631 Les gens l'ont consulté

À de nombreuses reprises, nous devrons peut-être fournir une capture d'écran à télécharger dans le système en tant que bon. La méthode de fonctionnement traditionnelle est la suivante : prendre une capture d'écran, enregistrer le fichier localement, sélectionner le fichier local sur la page Web et le télécharger, ce qui nécessite au moins trois étapes. Est-il possible de coller la capture d'écran directement sur la page Web, puis de la télécharger ? La réponse est : oui. C’est le sujet de cet article.

Comme mon projet nécessite le téléchargement de captures d'écran, afin d'offrir une meilleure expérience utilisateur et de réduire le nombre d'étapes, j'ai cherché en ligne et trouvé quelques indices. Afin de faciliter la réutilisation et le partage, j'ai fait une certaine encapsulation de cette fonction, j'ai donc imaginé ce plug-in de capture d'écran-coller. L'effet de course est le suivant :

Exemple d'appel de plug-in :

<html>
<head>
  <title>screenshot paste example</title>
  <meta charset='utf-8'>
</head>
<body>
  <input type="text" id="demo" placeholder="ctrl+v 粘帖到这里"/>
  <div>
    <div id="imgPreview" style="border:1px solid #e0e0e0;margin-top:10px;display:inline;"></div>
  </div>  
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="js/screenshot-paste.js"></script>
  <script type="text/javascript">
    $('#demo').screenshotPaste({
      imgContainer:'#imgPreview'
    });
  </script>
</body>
</html>

Copier après la connexion

Dépendances du plug-in :

À partir de l'exemple d'appel, nous pouvons voir que ce plug-in dépend des éléments suivants :

1) Besoin de citer jquery

2) Le plugin lui-même capture d'écran-paste.js

3) Besoin d'une zone de texte et d'un div d'aperçu d'image

Éléments configurables par plug-in :

var options = {
  imgContainer: '#imgPreview', //预览图片的容器 
  imgHeight:200 //预览图片的默认高度 
};

Copier après la connexion

Méthode de plug-in :

Le plug-in n'a actuellement qu'une seule méthode, getImgData. L'exemple d'appel est le suivant :

var imgData = $('#demo').screenshotPaste('getImgData');
Il convient de mentionner que cette méthode renvoie le contenu de l'attribut src de img, qui est le contenu des données d'image codées en base64.

Une fois ces données téléchargées sur le serveur, elles doivent être décodées en base64. L'exemple de code de décodage est le suivant (version C#) :

private string UploadImage(string imageData)
    {
      imageData = imageData.Remove(0, imageData.IndexOf(',') + 1);//字符串中截图base64编码数据

      var bytes = Convert.FromBase64String(imageData);//base64解码
      var url = BLLOrderImg.UploadImg(bytes);//本行及以下代码行的内容可忽略

      return url;
    }

Copier après la connexion

Code source du plug-in :

(function ($) {
  $.fn.screenshotPaste=function(options){
    var me = this;

    if(typeof options =='string'){
      var method = $.fn.screenshotPaste.methods[options];

      if (method) {
        return method();
      } else {
        return;
      }
    }

    var defaults = {
      imgContainer: '',  //预览图片的容器
      imgHeight:200    //预览图片的默认高度
    };
    
    options = $.extend(defaults,options);

    var imgReader = function( item ){
      var file = item.getAsFile();
      var reader = new FileReader();
      
      reader.readAsDataURL( file );
      reader.onload = function( e ){
        var img = new Image();

        img.src = e.target.result;

        $(img).css({ height: options.imgHeight });
        $(document).find(options.imgContainer)
        .html('')
        .show()
        .append(img);
      };
    };
    //事件注册
    $(me).on('paste',function(e){
      var clipboardData = e.originalEvent.clipboardData;
      var items, item, types;

      if( clipboardData ){
        items = clipboardData.items;

        if( !items ){
          return;
        }

        item = items[0];
        types = clipboardData.types || [];

        for(var i=0 ; i < types.length; i++ ){
          if( types[i] === 'Files' ){
            item = items[i];
            break;
          }
        }

        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
          imgReader( item );
        }
      }
    });

    $.fn.screenshotPaste.methods = {
      getImgData: function () {
        var src = $(document).find(options.imgContainer).find('img').attr('src');

        if(src==undefined){
          src='';
        }

        return src;
      }
    };
  };
})(jQuery);

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.