在很多场合下，我们可能有这样的需求：提供个屏幕截图上传到系统，作为一个凭证。传统的操作方式是：屏幕截图，保存文件到本地，在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. asp.net 调用天气所遇到的问题

    由于在项目用了显示天气的功能,原有的调用方法 直接通过      <iframe name="weather_inc" src="http://i.tianqi.c ...

  2. socket本地模拟UDP 服务器+客户端（三）

    UDP: TCP是建立可靠连接,并且通信双方都可以以流的形式发送数据.相对TCP,UDP则是面向无连接的协议. 使用UDP协议时,不需要建立连接,只需要知道对方的IP地址和端口号,就可以直接发数据包. ...

  3. IOS学习：常用第三方库（GDataXMLNode：xml解析库）

    IOS学习:常用第三方库(GDataXMLNode:xml解析库) 解析 XML 通常有两种方式,DOM 和 SAX: DOM解析XML时,读入整个XML文档并构建一个驻留内存的树结构(节点树),通过 ...

  4. 《30天自制操作系统》读书笔记(3) 引入C语言

    这一次的学习相当曲折, 主要是因为粗心, Makefile里面的错误导致了文件生成出现各种奇奇怪怪的问题, 弄得心力交瘁, 因此制作过程还是尽量按着作者的路子来吧. 作者提供的源码的注释在中文系统下是 ...

  5. some words that I always make mistake

    发音相似容易混淆的词汇 alteration  英 [ɔːltə'reɪʃ(ə)n; 'ɒl-]  美 [,ɔltə'reʃən]  n. 修改,改变:变更 alteration /ˌɔːltəˈre ...

  6. 【Oracle】安装

    http://www.2cto.com/database/201208/150620.html 呵呵,花了一个多小时,左右把11g安装折腾好了.其中折腾SQL Developer 花了好长时间,总算搞 ...

  7. Android 手机上安装并运行 Ubuntu 12.04(转，没实测)

    设备需要root权限,并且安装了BusyBox最小 1GHz 处理器(推荐)Android 系统版本 2.1 或以上Android 设备需要自定义的ROM固件SD卡至2.5GB (安装大映像的需要3. ...

  8. 【Express】路由

    var express = require('express'); var app = express(); app.set('port', process.env.PORT || 3000); ap ...

  9. SqlServer新建视图

    一.使用SQL Server 2005数据库管理系统创建视图 1. 启动SQL Server 2005. 2. 在“对象资源管理器”窗口中找到Student数据库,打开Student文件夹,在“视图” ...

  10. android 解析文章，通过JSON格式请求传递 的好文章，这里记录一下

    http://blog.sina.com.cn/s/blog_8d955f8c0100xv7i.html http://blog.163.com/zhangzheming_282/blog/stati ...