Rumah > Artikel > hujung hadapan web > Kongsi js tampal tangkapan skrin ke laman web pemalam tampalan skrin-tampal_javascript kemahiran

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

WBOYasal: 2016-05-16 15:10:081610semak imbas

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>

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 //预览图片的默认高度 
};

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

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

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan komponen Sticky untuk melaksanakan navigasi tab dan navigasi tatal dengan kemahiran sticky effect_javascriptArtikel seterusnya：Cara menggunakan komponen Sticky untuk melaksanakan navigasi tab dan navigasi tatal dengan kemahiran sticky effect_javascript

Artikel berkaitan

Lihat lagi