多くの場合、バウチャーとしてシステムにアップロードするためにスクリーンショットを提供する必要がある場合があります。従来の操作方法は、スクリーンショットを撮り、ファイルをローカルに保存し、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);