分享js黏貼螢幕截圖到web頁面插件screenshot-paste

首頁

web前端

js教程

分享js黏貼螢幕截圖到web頁面插件screenshot-paste_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:10 PM

js 螢幕截圖

在許多場合下，我們可能有這樣的需求：提供個螢幕截圖上傳到系統，作為一個憑證。傳統的操作方式是：螢幕截圖，儲存檔案到本地，在web頁面上選擇本地檔案並上傳，這裡至少需要三步驟。有沒有可能直接將截圖貼到web頁面上，然後上傳？答案是：可以的。這就是本文要介紹的內容了。

由於我的專案有上傳螢幕截圖這樣的需求，為了使用者體驗更佳，減少操作步驟，我在網路上搜了一遍之後，找到了一些眉目。為了方便重複使用和分享，我又對該功能做了一些封裝，於是便有了這個插件 screenshot-paste。運作效果如下圖：

外掛程式呼叫範例：

<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)插件本身screenshot-paste.js

3)需要一個textbox和圖片預覽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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7541

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何透過AirDrop在iPhone上分享最後一張螢幕截圖 Feb 23, 2024 am 08:16 AM

為了簡化重複性任務，Apple推出了快捷方式應用程序，可以幫助您自動完成日常常見操作，例如離開手機時自動關閉互聯網連接，或者在上車時自動播放您最喜愛的音樂列表等等。您可能希望更便捷地完成的一項任務是在不開啟「照片」應用程式的情況下分享您剛剛截取的最後一張螢幕截圖。本文將介紹如何利用Airdrop功能，快速將iPhone最新的螢幕截圖傳送給他人或其他蘋果裝置。如何在iPhone上快速共享最後一張螢幕截圖在共享內容之前，請確保目標設備（如另一部iPhone、iPad或Mac）已啟用“隔空投送”，以便實現

如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

See all articles

分享js黏貼螢幕截圖到web頁面插件screenshot-paste_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題