分享js粘帖屏幕截圖到web頁(yè)面插件screenshot-paste

更新時(shí)間：2020年08月21日 15:16:48 作者：hhhsky

這篇文章主要為大家分享了js粘帖屏幕截圖到web頁(yè)面插件screenshot-paste的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在很多場(chǎng)合下，我們可能有這樣的需求：提供個(gè)屏幕截圖上傳到系統(tǒng)，作為一個(gè)憑證。傳統(tǒng)的操作方式是：屏幕截圖，保存文件到本地，在web頁(yè)面上選擇本地文件并上傳，這里至少需要三步。有沒有可能直接將截圖粘帖到web頁(yè)面上，然后上傳？答案是：可以的。這就是本文要介紹的內(nèi)容了。

由于我的項(xiàng)目有上傳屏幕截圖這樣的需求，為了用戶體驗(yàn)更佳，減少操作步驟，我在網(wǎng)上搜了一遍之后，找到了一些眉目。為了便于復(fù)用和共享，我又對(duì)該功能做了一些封裝，于是便有了這個(gè)插件 screenshot-paste。運(yùn)行效果如下圖：

插件調(diào)用示例：

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

插件依賴：

從調(diào)用示例中，我們可以看到，這個(gè)插件依賴如下：

1)需要引用jquery

2)插件本身screenshot-paste.js

3)需要一個(gè)textbox和圖片預(yù)覽div

插件可配置項(xiàng)：

var options = {
 imgContainer: '#imgPreview', //預(yù)覽圖片的容器 
 imgHeight:200 //預(yù)覽圖片的默認(rèn)高度 
};

插件方法：

該插件目前只有一個(gè)方法 getImgData，調(diào)用示例如下：

var imgData = $('#demo').screenshotPaste('getImgData');
值得一提的是，該方法返回的是img的src屬性里面的內(nèi)容，即base64編碼的圖片數(shù)據(jù)內(nèi)容。

這樣的數(shù)據(jù)上傳到服務(wù)器之后，需要用base64解碼，解碼示例代碼如下（C#版）：

private string UploadImage(string imageData)
 {
 imageData = imageData.Remove(0, imageData.IndexOf(',') + 1);//字符串中截圖base64編碼數(shù)據(jù)

 var bytes = Convert.FromBase64String(imageData);//base64解碼
 var url = BLLOrderImg.UploadImg(bytes);//本行及以下代碼行的內(nèi)容可忽略

 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: '', //預(yù)覽圖片的容器
 imgHeight:200 //預(yù)覽圖片的默認(rèn)高度
 };
 
 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);
 };
 };
 //事件注冊(cè)
 $(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);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js使用cookie記錄用戶名的方法
這篇文章主要介紹了js使用cookie記錄用戶名的方法,通過完整實(shí)例形式分析了JavaScript針對(duì)cookie的創(chuàng)建、賦值及刪除等操作技巧,以及通過cookie記錄用戶登錄信息的方法,需要的朋友可以參考下
2015-11-11
學(xué)習(xí)JavaScript設(shè)計(jì)模式之中介者模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的中介者模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
JavaScript實(shí)現(xiàn)給浮點(diǎn)數(shù)添加千分位逗號(hào)的多種方法
JavaScript 是一門強(qiáng)大的前端語(yǔ)言,在處理數(shù)值格式化時(shí)提供了多種方法,在開發(fā)過程中,我們經(jīng)常需要將大數(shù)字格式化,使其更具可讀性,例如,將 12000000.11 轉(zhuǎn)換為 12,000,000.11,本文將詳細(xì)介紹 JavaScript 中如何實(shí)現(xiàn)這種格式化,需要的朋友可以參考下
2025-04-04
JavaScript如何把兩個(gè)數(shù)組對(duì)象合并過程解析
這篇文章主要介紹了JavaScript如何把兩個(gè)數(shù)組對(duì)象合并過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
手把手教你uniapp和uview2.0實(shí)現(xiàn)表單校驗(yàn)實(shí)戰(zhàn)
表單提交對(duì)大家來(lái)說(shuō)應(yīng)該都不陌生,這是個(gè)很常見的功能,這篇文章主要給大家介紹了關(guān)于手把手教你uniapp和uview2.0實(shí)現(xiàn)表單校驗(yàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
這篇文章主要介紹了使用原生JS實(shí)現(xiàn)火鍋點(diǎn)餐小程序（面向?qū)ο笏枷耄?在這里小程序使用的是es6開發(fā)標(biāo)準(zhǔn)，本文通過代碼展示，截圖的形式給大家介紹，需要的朋友可以參考下
2019-12-12