在很多场合下，我们可能有这样的需求：提供个屏幕截图上传到系统，作为一个凭证。传统的操作方式是：屏幕截图，保存文件到本地，在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(, imageData.IndexOf(',') + );//字符串中截图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);

粘帖屏幕截图到web页面插件 screenshot-paste的更多相关文章

  1. 谷歌/微软/必应web页面免费翻译插件

    随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...

  2. Chrome插件触发web页面的事件

    Chrome插件中不能直接调用Web页面的元素js,原因是chrome插件的机制http://stackoverflow.com/questions/17819344/triggering-a-cli ...

  3. 记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)

    1) 方案一,  使用Web Service  基础功能没问题, 只是在连接https (ssh) 网站时, 需要针对https进行开发 (即http 和https 生成两套接口, 不太容易统一 ). ...

  4. QT使用插件QAxWidget来展示web页面

    要求:用qt版开发一个桌面程序,该程序有一个界面,用来显示一个采用silverlight开发的web页面. 分析:在qt中实现web显示,根据qt的版本和对应编译器的版本,有如下选择: (1)5.6以 ...

  5. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  6. base64：URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  7. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  8. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  9. 【转】Hadoop web页面的授权设定

    转载自过往记忆(http://www.iteblog.com/)本文链接地址: <Hadoop web页面的授权设定>(http://www.iteblog.com/archives/98 ...

随机推荐

  1. Jquery中$.post()与$.get()区别

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结 ...

  2. c语言Winpcap编程构造并接收解析arp包

    /* 程序功能: 1.构造arp包,并发送.程序参数顺序:源IP.目的IP.mac地址.flag 2.获取网络中的ARP数据包,解析数据包的内容.程序参数:日志文件名 winpacp中文技术文档(基本 ...

  3. 解决xp下无法通过windows installer服务安装此安装程序包。您必须安装带有更新版本Wi

    今天装 tortoisegit 的时候发现安装包不能使用.报错无法通过windows installer服务安装此安装程序包.您必须安装带有更新版本Windows Installer服务的Window ...

  4. 根据Hash分块存储文件

    迷你云默认存储方式是Hash存储模式,文件内容存储在本地硬盘,而非明文存储模式 一.下图大致说明了情况 <ignore_js_op> 二.工作原理 1.假设用户上传了A.doc文件,迷你云 ...

  5. First ASP.NET Core Application on a Mac Using Visual Studio Code

    一直希望可以在mac上直接编写webapp (用C#)现在终于伴随着 core 世界美好了,不需要用pd windows了 nice. Visual studio code 更新1.1版本了 怀着激动 ...

  6. MySQL全连接(Full Join）实现,union和union all用法

    MySQL本身不支持你所说的full join(全连接),但可以通过union来实现 ,下面是一个简单测试,可以看看: mysql> CREATE TABLE a(id int,name cha ...

  7. 【数学】XMU 1593 找数字

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1593 题目大意: T组数据,n个数,只有一种出现q次,其余的出现p次.(1<=T ...

  8. C#文本转语音并保存wav和MP3文件

    回顾上次写博客至今都有4个多月了,最近工作比较的忙没时间写博文.以后会多坚持写博文,与大家分享下最近遇到的问题.最近因为项目需要,研究了下用C#开发TTS.下面把大体的思路给大家说说,希望对大家有所帮 ...

  9. 2014-08-29　Last Day

    今天实在吾索实习的第38天,也是这个暑假在吾索实习的最后一天. 这天里,并有做过多的新知识的学习,而是对先前的BBS系统进行优化,从外观的优化到每一行每一句代码的优化,希望能系统有更高的效率.虽说,暑 ...

  10. Ubuntu输入密码之后，桌面闪一下黑屏，然后又返回到输入密码界面。但是其他账户可以登入

    1)原因:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件 说明:Xauthority,是startx脚本记录文件.Xserver启动时 ...