Share js paste screenshots to web page plug-in screenshot-paste

Share js paste screenshots to web page plug-in screenshot-paste_javascript skills

WBOY

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

Original

1625 people have browsed it

On many occasions, we may have the need to provide a screenshot to upload to the system as a voucher. The traditional operation method is: take a screenshot, save the file locally, select the local file on the web page and upload it, which requires at least three steps. Is it possible to paste the screenshot directly onto the web page and then upload it? The answer is: yes. That’s what this article is about.

Since my project requires uploading screenshots, in order to provide a better user experience and reduce the number of steps, I searched online and found some clues. In order to facilitate reuse and sharing, I made some encapsulation of this function, so I came up with this plug-in screenshot-paste. The running effect is as follows:

Plug-in calling example:

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

Copy after login

Plug-in dependencies:

From the calling example, we can see that this plug-in depends on the following:

1) Need to quote jquery

2) The plugin itself screenshot-paste.js

3) Need a textbox and image preview div

Plug-in configurable items:

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

Copy after login

Plug-in method:

The plug-in currently only has one method, getImgData. The calling example is as follows:

var imgData = $('#demo').screenshotPaste('getImgData');
It is worth mentioning that this method returns the content in the src attribute of img, which is the base64 encoded image data content.

After such data is uploaded to the server, it needs to be decoded using base64. The decoding sample code is as follows (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;
    }

Copy after login

Plug-in source code:

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

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone’s study.