웹 페이지 플러그인 스크린샷-paste_javascript 기술에 js 붙여넣기 스크린샷 공유
- WBOY원래의
- 2016-05-16 15:10:081632검색
많은 경우 바우처로 시스템에 업로드하기 위해 스크린샷을 제공해야 할 수도 있습니다. 전통적인 작업 방법은 스크린샷을 찍고, 파일을 로컬에 저장하고, 웹 페이지에서 로컬 파일을 선택하고 업로드하는 것입니다. 이 작업에는 최소 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);
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.