js スクリーンショットを Web ページプラグインに貼り付けて共有する scripting-paste

js スクリーンショットを Web ページプラグインに貼り付けて共有する scripting-paste_javascript スキル

WBOY

リリース： 2016-05-16 15:10:08

オリジナル

1634 人が閲覧しました

多くの場合、バウチャーとしてシステムにアップロードするためにスクリーンショットを提供する必要がある場合があります。従来の操作方法は、スクリーンショットを撮り、ファイルをローカルに保存し、Web ページ上でローカルファイルを選択してアップロードするというもので、少なくとも 3 つの手順が必要です。スクリーンショットをWebページに直接貼り付けてアップロードすることはできますか?答えは「はい」です。それがこの記事の内容です。

私のプロジェクトではスクリーンショットをアップロードする必要があるため、より良いユーザーエクスペリエンスを提供し、手順の数を減らすために、オンラインで検索し、いくつかの手がかりを見つけました。再利用と共有を容易にするために、この機能をカプセル化して、このプラグインのスクリーンショット貼り付けを思いつきました。ランニング効果は以下の通りです:

プラグインの呼び出し例:

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

ログイン後にコピー

プラグインの依存関係:

呼び出し例から、このプラグインが次のものに依存していることがわかります:

1) jquery を引用する必要があります

2) プラグイン自体screenshot-paste.js

3) テキストボックスと画像プレビュー div が必要です

プラグイン設定可能項目:

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

ログイン後にコピー

プラグインメソッド:

プラグインには現在、getImgData というメソッドが 1 つだけあります。呼び出し例は次のとおりです。

var imgData = $('#demo').screenshotPaste('getImgData');
このメソッドは、img の src 属性のコンテンツ (base64 でエンコードされた画像データコンテンツ) を返すことに注意してください。

このようなデータをサーバーにアップロードした後、base64 を使用してデコードする必要があります。デコードのサンプルコードは次のとおりです (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;
    }

ログイン後にコピー

プラグインのソースコード:

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

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。