分享js粘帖屏幕截图到web页面插件screenshot-paste


Posted in Javascript onAugust 21, 2020

在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证。传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步。有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的。这就是本文要介绍的内容了。

由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目。为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste。运行效果如下图:

分享js粘帖屏幕截图到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编码的图片数据内容。

分享js粘帖屏幕截图到web页面插件screenshot-paste

这样的数据上传到服务器之后,需要用base64解码,解码示例代码如下(C#版):

private string UploadImage(string imageData)
 {
 imageData = imageData.Remove(0, imageData.IndexOf(',') + 1);//字符串中截图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);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JQuery用户名校验的具体实现
Mar 18 #Javascript
基于javascript实现页面加载loading效果
Sep 15 #Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 #Javascript
javascript移动开发中touch触摸事件详解
Mar 18 #Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 #Javascript
基于jQuery实现收缩展开功能
Mar 18 #Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
You might like
php二维数组转成字符串示例
2014/02/17 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
JavaScript 参考教程
2006/12/29 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jquery常用操作小结
2014/07/21 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
常用的js方法合集
2017/03/10 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python ATM功能实现代码实例
2020/03/19 Python
大学考试作弊检讨书
2014/01/30 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
会计实训报告范文
2014/11/04 职场文书
团支部书记竞选稿
2015/11/21 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers