分享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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JQuery学习总结【一】
Dec 01 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue3.0生命周期的示例代码
Sep 24 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python如何生成xml文件
2020/06/04 Python
Python用Jira库来操作Jira
2020/12/28 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
祖国在我心中演讲稿500字
2014/05/04 职场文书
在校实习生求职信
2014/06/18 职场文书
医院见习报告范文
2014/11/03 职场文书
工程主管竞聘书
2015/09/15 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android