Heim > Artikel > Web-Frontend > Teilen Sie js-Screenshots in Webseiten-Plug-in einfügen Screenshot-Paste_Javascript-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:10:081607Durchsuche

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>

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 //预览图片的默认高度 
};

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

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Sticky-Komponente, um die Tab-Navigation und Scroll-Navigation mit Sticky-Effekt_Javascript-Fähigkeiten zu implementierenNächster Artikel：So verwenden Sie die Sticky-Komponente, um die Tab-Navigation und Scroll-Navigation mit Sticky-Effekt_Javascript-Fähigkeiten zu implementieren

In Verbindung stehende Artikel

Mehr sehen