在很多场合下，我们可能有这样的需求：提供个屏幕截图上传到系统，作为一个凭证。传统的操作方式是：屏幕截图，保存文件到本地，在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. （转载）图解Linux系统的系统架构

    我以下图为基础,说明Linux的架构(architecture).(该图参考<Advanced Programming in Unix Environment>) 最内层是硬件,最外层是用 ...

  2. 数据结构 --- 线性表学习（php模拟）

    线性表:零个或多个数据元素的有限序列(注:以下都是用的整型数据模拟) 一 顺序存储结构(用一段地址连续的存储单元一次存储线性表的数据元素) 1.1 三个属性:存储空间的起始位置:最大存储容量:当前长度 ...

  3. Memcached-1.4.4启动参数——手动设置chunk大小的上限

    最近在看memcached的源代码,源码包是memcached-1.4.22,一开始看memcached.c的main函数的时候发现了和1.2.8的不同之处. 可能在1.4.22版本之前就已经添加了这 ...

  4. PHP简单获取数据库查询结果并返回JSON

    <?php header("Content-type:text/html;charset=utf-8"); //连接数据库 $con = mysql_connect(&quo ...

  5. python中如何用sys.excepthook来对全局异常进行捕获、显示及输出到error日志中

    使用sys.excepthook函数进行全局异常的获取. 1. 使用MessageDialog实现异常显示: 2. 使用logger把捕获的异常信息输出到日志中: 步骤:定义异常处理函数, 并使用该函 ...

  6. LED驅動芯片最大特點

    最大特點是: 1.電源電壓在很寬的範圍內工作時,(約180V-265V)能保證 LED的恒功率輸出,並且 LED可實現無頻閃輸出. 2.實現安全隔離的安全電壓輸出,甚至是安全超低電壓輸出. 3.IC2 ...

  7. 线程通信机制：共享内存 VS 消息传递

    在并发编程中,我们必须考虑的问题时如何在两个线程间进行通讯.这里的通讯指的是不同的线程之间如何交换信息. 目前有两种方式: 1.共享内存 2.消息传递(actor 模型) 共享内存: 共享内存这种方式 ...

  8. perl 分析mysql binlog

    binlog 日志格式: use `zjzc`/*!*/; SET TIMESTAMP=1476326343/*!*/; UPDATE `ProductAccess` pa SET pa.access ...

  9. NOIP

    最近把历年题刷一下吧... 发现0几年的题不是爆搜就是高精度,恶心死了...直接跳过,做些有意思的... P1129产生数 floyed之后乘法原理统计   P1810导弹拦截 贪心,按距某个点的距离 ...

  10. 腾讯CDC谈扁平化设计

    扁平化设计无疑是当前讨论最多,最火的设计形式,自ios7面世以来更是将扁平化设计的讨论推向风口浪尖. 在这里我不想分析拟物设计和扁平化设计的优劣,更不想说谁更好!在形式服从内容的今天,我只能说哪种设计 ...