Home > Developer > JavaScript
Share js paste screen to web page plug-ins screenshot-paste, jsscreenshot-paste
In many cases, we may need to provide a screen for uploading to the system as a credential. The traditional operation method is: screen, save the file to the local, select a local file on the web page and upload it, here at least three steps are required. Is it possible to directly paste the post to the web page and then upload it? The answer is: yes. This is what we will introduce.
Because my project has the need to upload screens, I searched the internet and found some eyes for better user experience and reduced operation steps. To facilitate reuse and sharing, I made some encapsulation of this function, so I had the plug-in screenshot-paste. The running effect is as follows:
Example of plug-in call:
<Html>Plugin dependency:
In the call example, we can see that this plug-in depends on the following:
1) jquery needs to be referenced
2) Plug-in itself screenshot-paste.js
3) A textbox and image preview div are required.
Configuration items of the plug-in:
Var options = {imgContainer: '# imgpreview', // The default height of the preview image container imgHeight: 200 // The default height of the preview image };Plugin method:
This plug-in currently only has one method getImgData. The call 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, that is, the base64-encoded image data content.After such data is uploaded to the server, base64 must be used for decoding. The sample code for decoding is as follows (C ):
Private string UploadImage (string imageData) {imageData = imageData. remove (0, imageData. indexOf (',') + 1); // base64 encoded data in the string var bytes = Convert. fromBase64String (imageData); // base64 decodes var url = BLLOrderImg. uploadImg (bytes); // The return url can be ignored for the content of this line and the following code lines ;}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: '', // preview the image container imgHeight: 200 // The default height of the preview image}; options = $. extend (defaults, options); var imgReader = function (item) {var file = item. getAsFile (); var reader = new Fil EReader (); reader. readAsDataURL (file); reader. onload = function (e) {var img = new Image (); img. src = e.tar get. result; watermark (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. ite MS; 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 all the content of this article, hoping to help you learn.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
