您的当前位置：首页分享js粘帖屏幕截图到web页面插件screenshot-paste_javascript技巧

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

来源：爱若养生

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

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

插件调用示例：



 screenshot paste example

插件依赖：

从调用示例中，我们可以看到，这个插件依赖如下：

1)需要引用jquery

2)插件本身screenshot-paste.js

3)需要一个textbox和图片预览div

插件可配置项：

插件方法：

该插件目前只有一个方法 getImgData，调用示例如下：

var imgData = $('#demo').screenshotPaste('getImgData');
值得一提的是，该方法返回的是img的src属性里面的内容，即base编码的图片数据内容。

这样的数据上传到服务器之后，需要用base解码，解码示例代码如下（C#版）：

private string UploadImage(string imageData)
 {
 imageData = imageData.Remove(0, imageData.IndexOf(',') + 1);//字符串中截图base编码数据

 var bytes = Convert.FromBaseString(imageData);//base解码
 var url = BLLOrderImg.UploadImg(bytes);//本行及以下代码行的内容可忽略

 return url;
 }

插件源码：