Share JS paste screen screenshot to Web page plugin Screenshot-paste_javascript tips

In many cases, we may have this requirement: provide a screenshot to upload to the system as a voucher. The traditional mode of operation is: Screen capture, save the file to the local, on the Web page to select Local files and upload, there are at least three steps here. Is it possible to paste the screenshot directly onto the Web page and upload it? The answer is: yes. That's what this article is about.

Because my project has to upload screen screenshots Such a demand, in order to user experience better, reduce the operating procedures, I searched the internet after, found some clues. In order to facilitate reuse and sharing, I did some encapsulation of the function, so I have this plugin screenshot-paste. The results of the operation are shown below:

Plug-in Invocation Example:

Plug-in dependencies:

From the invocation example, we can see that this plug-in relies on the following:

1 need to quote jquery

2) The plugin itself screenshot-paste.js

3 Need a TextBox and picture preview Div

Plug-in Configurable items:

var options = {
  imgcontainer: ' #imgPreview ',//preview picture's container 
  imgheight:200//preview picture's default height 
};

Plug-in method:

The plug-in currently has only one method Getimgdata, and the invocation example is as follows:

var imgdata = $ (' #demo '). Screenshotpaste (' Getimgdata ');
It is worth mentioning that the method returns the content of the SRC attribute of IMG, that is, the Base64 encoded picture data content.

After uploading such data to the server, you need to decode it with Base64 and decode the sample code as follows (C # version):

private string Uploadimage (string imagedata)
    {
      imagedata = imagedata.remove (0, Imagedata.indexof (', ') + 1); /String screenshot base64 encoded data

      var bytes = convert.frombase64string (imagedata);//base64 decode
      var url = Bllorderimg.uploadimg (bytes);//Bank and the contents of the following line of code can ignore the return

      URL;
    }

Plug-in Source:

(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: ',//preview picture's container imgheight:200//preview picture's default height};

    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);
    };
    };
      Event Registration $ (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)) {Imgread
        ER (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 to help you learn.