search

Home  >  Article  >  Web Front-end  >  Share js paste screenshots to web page plug-in screenshot-paste_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:10:081628browse

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>

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

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

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

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use Sticky component to implement tab navigation and scroll navigation with sticky effect_javascript skillsNext article：How to use Sticky component to implement tab navigation and scroll navigation with sticky effect_javascript skills

Related articles

See more