Kongsi js tampal tangkapan skrin ke laman web pemalam tampalan skrin-tampal

Kongsi js tampal tangkapan skrin ke laman web pemalam tampalan skrin-tampal_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 15:10:08

asal

1656 orang telah melayarinya

Pada banyak keadaan, kami mungkin perlu menyediakan tangkapan skrin untuk memuat naik ke sistem sebagai baucar. Kaedah operasi tradisional ialah: ambil tangkapan skrin, simpan fail secara setempat, pilih fail setempat pada halaman web dan muat naiknya, yang memerlukan sekurang-kurangnya tiga langkah. Adakah mungkin untuk menampal tangkapan skrin terus ke halaman web dan kemudian memuat naiknya? Jawapannya ialah: ya. Itulah maksud artikel ini.

Memandangkan projek saya memerlukan muat naik tangkapan skrin, untuk memberikan pengalaman pengguna yang lebih baik dan mengurangkan bilangan langkah, saya mencari dalam talian dan menemui beberapa petunjuk. Untuk memudahkan penggunaan semula dan perkongsian, saya membuat beberapa enkapsulasi fungsi ini, jadi saya menghasilkan pemalam ini tampal tangkapan skrin. Kesan larian adalah seperti berikut:

Contoh panggilan pemalam:

<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>

Salin selepas log masuk

Kebergantungan pemalam:

Daripada contoh panggilan, kita dapat melihat bahawa pemalam ini bergantung pada perkara berikut:

1) Perlu memetik jquery

2) Pemalam itu sendiri screenshot-paste.js

3) Memerlukan kotak teks dan div pratonton imej

Item boleh dikonfigurasikan pemalam:

var options = {
  imgContainer: '#imgPreview', //预览图片的容器 
  imgHeight:200 //预览图片的默认高度 
};

Salin selepas log masuk

Kaedah pemalam:

Pemalam hanya mempunyai satu kaedah pada masa ini, getImgData Contoh panggilan adalah seperti berikut:

var imgData = $('#demo').screenshotPaste('getImgData');
Perlu dinyatakan bahawa kaedah ini mengembalikan kandungan dalam atribut src img, iaitu kandungan data imej yang dikodkan base64.

Selepas data tersebut dimuat naik ke pelayan, ia perlu dinyahkod menggunakan base64 Kod sampel penyahkodan adalah seperti berikut (versi 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;
    }

Salin selepas log masuk

Kod sumber pemalam:

(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);

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.