Teilen Sie js-Screenshots in Webseiten-Plug-in einfügen Screenshot-Paste_Javascript-Fähigkeiten-js-Tutorial-php.cn

Teilen Sie js-Screenshots in Webseiten-Plug-in einfügen Screenshot-Paste_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:10:08

Original

1656 Leute haben es durchsucht

In vielen Fällen müssen wir möglicherweise einen Screenshot bereitstellen, um ihn als Gutschein in das System hochzuladen. Die herkömmliche Vorgehensweise besteht darin, einen Screenshot zu machen, die Datei lokal zu speichern, die lokale Datei auf der Webseite auszuwählen und hochzuladen, was mindestens drei Schritte erfordert. Ist es möglich, den Screenshot direkt auf der Webseite einzufügen und dann hochzuladen? Die Antwort lautet: Ja. Darum geht es in diesem Artikel.

Da mein Projekt das Hochladen von Screenshots erfordert, um eine bessere Benutzererfahrung zu bieten und die Anzahl der Schritte zu reduzieren, habe ich online gesucht und einige Hinweise gefunden. Um die Wiederverwendung und Weitergabe zu erleichtern, habe ich diese Funktion gekapselt und daher dieses Plug-in zum Einfügen von Screenshots erstellt. Der Laufeffekt ist wie folgt:

Plug-in-Aufrufbeispiel:

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

Nach dem Login kopieren

Plug-in-Abhängigkeiten:

Aus dem Aufrufbeispiel können wir ersehen, dass dieses Plug-in von Folgendem abhängt:

1) Jquery muss zitiert werden

2) Das Plugin selbst Screenshot-Paste.js

3) Benötigen Sie ein Textfeld und eine Bildvorschau-Div

Plug-in-konfigurierbare Elemente:

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

Nach dem Login kopieren

Plug-in-Methode:

Das Plug-in verfügt derzeit nur über eine Methode, getImgData. Das Aufrufbeispiel lautet wie folgt:

var imgData = $('#demo').screenshotPaste('getImgData');
Es ist erwähnenswert, dass diese Methode den Inhalt im src-Attribut von img zurückgibt, bei dem es sich um den Base64-codierten Bilddateninhalt handelt.

Nachdem solche Daten auf den Server hochgeladen wurden, müssen sie mit base64 dekodiert werden. Der Dekodierungsbeispielcode lautet wie folgt (C#-Version):

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

Nach dem Login kopieren

Plug-in-Quellcode:

(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);

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.