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

    原先学习过Yii1的相关知识,虽然也是半懂不懂的,但稍微的结构是了解的.现在利用晚上的时间学习下Yii2的使用,打算建一个后台管理系统,这里记录下,以免自己以后忘记. 目前已看一部分Yii2的权威指南 ...

  2. window.clearInterval与window.setInterval的用法 定时器的设置

    window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) code:在指定时间到时要执行的Java ...

  3. jQuery1.6以上版本prop和attr的区别

  4. C语言基础学习基本数据类型-浮点型

    float和double 加了小数点的数都是浮点数.C语言有两种书写浮点数的方式,一种是使用常用的标准小数点表示法,如下: 0.00056 8.0 1.23 第二种表示浮点值叫做E表示法.下面是一些例 ...

  5. python -i filename

    今天学习的时候看见python -i filaname 这个命令,书上说使用这个命令可以去执行filename文件中的代码.但是今天在使用的时候却一直报错,经过多次测试才把问题解决. 原来这个命令是不 ...

  6. FCKEditor使用说明

    1.基本设置   先看看效果是什么样的:   效果图: 那么为什么说是FCKeditor的冰冷之心呢?这不是哗众取宠,主要是说它使用起来有点麻烦,下文就详细说明如何搞定这玩意儿. 1.FCKedito ...

  7. C#开发学习——.net C#中页面之间传值传参的方法以及内置对象

    1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能 ...

  8. 关于 mod_python

    首先声明 本文 翻译 别人的文章,文章的作者是 mod_python 项目的负责人,目前 mod_python已由 Apache维护.原文地址: http://www.onlamp.com/pub/a ...

  9. winform拖动无边框窗体

    这个无边框拖动船体,代码很少,却总是记不住,于是就在网上搜了这段代码,记录一下,省的再忘 using System; using System.Collections.Generic; using S ...

  10. 读取pdf文件 .选择了itextsharp 库

    此库还是比较成熟.看博客园很多文章都介绍了此库 用法 如果项目用到读取pdf.  我这只是提供个思路.或者提供个方法.用itextsharp 能方便实现 StringBuilder text = ne ...