>  기사  >  웹 프론트엔드  >  웹 페이지 플러그인 스크린샷-paste_javascript 기술에 js 붙여넣기 스크린샷 공유

웹 페이지 플러그인 스크린샷-paste_javascript 기술에 js 붙여넣기 스크린샷 공유

WBOY
WBOY원래의
2016-05-16 15:10:081609검색

많은 경우 바우처로 시스템에 업로드하기 위해 스크린샷을 제공해야 할 수도 있습니다. 전통적인 작업 방법은 스크린샷을 찍고, 파일을 로컬에 저장하고, 웹 페이지에서 로컬 파일을 선택하고 업로드하는 것입니다. 이 작업에는 최소 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);

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.