많은 경우 바우처로 시스템에 업로드하기 위해 스크린샷을 제공해야 할 수도 있습니다. 전통적인 작업 방법은 스크린샷을 찍고, 파일을 로컬에 저장하고, 웹 페이지에서 로컬 파일을 선택하고 업로드하는 것입니다. 이 작업에는 최소 3단계가 필요합니다. 스크린샷을 웹페이지에 직접 붙여넣은 후 업로드할 수 있나요? 대답은 다음과 같습니다. 그렇습니다. 이것이 바로 이 기사의 내용입니다.
제 프로젝트는 스크린샷을 업로드해야 하기 때문에 더 나은 사용자 경험을 제공하고 단계 수를 줄이기 위해 온라인으로 검색하여 몇 가지 단서를 찾았습니다. 재사용과 공유를 용이하게 하기 위해 이 기능을 일부 캡슐화하여 이 플러그인 스크린샷 붙여넣기를 생각해 냈습니다. 실행 효과는 다음과 같습니다.
플러그인 호출 예:
<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) 플러그인 자체 스크린샷-paste.js
3) 텍스트 상자와 이미지 미리보기 div가 필요합니다
플러그인 구성 가능 항목:
var options = { imgContainer: '#imgPreview', //预览图片的容器 imgHeight:200 //预览图片的默认高度 };
플러그인 방법:
현재 플러그인에는 getImgData라는 하나의 메소드만 있습니다. 호출 예는 다음과 같습니다.
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);
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.