分享js粘帖屏幕截图到web页面插件screenshot-paste(分享js粘帖屏幕怎么弄)

推荐整理分享分享js粘帖屏幕截图到web页面插件screenshot-paste(分享js粘帖屏幕怎么弄)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:分享js粘帖屏幕怎么用,js 粘贴图片,js触发粘贴事件,js复制粘贴功能,分享js粘帖屏幕不显示,分享js粘帖屏幕不显示,分享js粘帖屏幕怎么用,分享js粘帖屏幕不显示,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

插件调用示例：

插件依赖：

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

1)需要引用jquery

2)插件本身screenshot-paste.js

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

插件可配置项：

插件方法：

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

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

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

插件源码：