在很多场合下，我们可能有这样的需求：提供个屏幕截图上传到系统，作为一个凭证。传统的操作方式是：屏幕截图，保存文件到本地，在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. [Python笔记]第十一篇:面向对象

    以上就是本节对于面向对象初级知识的介绍,总结如下: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用 对象,根据模板创建的实例(即 ...

  2. Solr In Action 笔记(1) 之 Key Solr Concepts

    Solr In Action 笔记(1) 之 Key Solr Concepts 题记:看了下<Solr In Action>还是收益良多的,只是奈何没有中文版,只能查看英语原版有点类,第 ...

  3. 理解 Javascript 的闭包

    什么是闭包 闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性.但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是: 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会 ...

  4. Word中封面的问题

    老师给了封面,当从一个文档复制到另一个文档时格式变了,即便用格式刷也解决不了一些问题,那么就把正文复制到带有封面的文档,把老师的其他内容删掉.

  5. 【Maven实战】依赖的范围

    在Maven中有三大模块,分别是依赖.仓库.生命周期和插件,我们接下来下来介绍下依赖,为了方便起见我们还是以案例来说: 1.首先建立一个maven项目,这里我建立一个user的项目 2.接下来我们在这 ...

  6. SANS top 20

    What Are the Controls?The detailed Consensus Audit Guidelines are posted at http://www.sans.org/cag/ ...

  7. pojPots

    http://poj.org/problem?id=3414 #include<cstdio> #include<cstring> #define MAXN 1000000 u ...

  8. C51与汇编语言混合编程

    函数内部混合编程 若想在C语言函数内部使用汇编语言,应使用以下Cx51编译器控制命令: #pragma asm ; Assembly code #pragma endasm  功能作用:asm和end ...

  9. Xamarin Studio –Project not built in active configuration

    当我们加载项目以后如果出现以下项目提示 处理方式如下: 解决方案右键->options 配置->configuration mappings->勾选构建的ios项目 项目右键-> ...

  10. 基于MINA框架快速开发网络应用程序

    1．MINA框架简介 MINA(Multipurpose Infrastructure for Network Applications)是用于开发高性能和高可用性的网络应用程序的基础框架.通过使用M ...