分享js贴纸屏幕截图到网页插件屏幕粘贴
在许多场合，我们可能需要提供一个屏幕截图上传到系统作为凭证。这种传统的操作方式：屏幕截图，保存文件到本地，选择网页上的本地文件和上传，至少三个步骤是需要在这里。可以贴上直接截图网页上传答案是：是的，这是本文的内容。因为我有需求的项目上传截图，为了更好的用户体验，减少了操作步骤，我在网上找到了，找到了一些前景。为了便于重用和共享，我做了一些封装的函数，所以我有插件screenshot-paste.the运行效果如下：
插件调用示例：
截图粘贴示例
$（#演示）。ScreenshotPaste（{
ImgContainer：# imgpreview
}）；
插件依赖：
从调用示例中，我们可以看到插件依赖于以下内容：
1）需要参考jQuery
2）插件本身screenshot-paste.js
3）需要一个文本框和图片预览的div
插入可配置的项目：
var选项{ {
ImgContainer：# imgpreview， / /集装箱图像预览
imgheight：200 / /预览的默认高度
}；
插件方法：
该插件目前只有一个方法，getimgdata，即如下：
imgdata = $（var的#演示）。ScreenshotPaste（'getimgdata）；
值得一提的是，该方法返回IMG，src属性是内容，图片的数据通过base64编码的内容。
在上传数据到服务器，你需要解码base64解码示例代码如下（C #版）：
uploadimage字符串（字符串数据）
{
数据=数据。删除（0，imagedata.indexof（' '）+ 1）； / / Base64编码的数据串的截图
VaR字节= convert.frombase64string（数据）； / / Base64解码
var url = bllorderimg.uploadimg（字节）； / /以下几行代码和内容可以忽略
返回的URL；
}
插入源代码：
（函数（$）{）
美元。FN。screenshotpaste =功能（选项）{
我=这个；
如果（typeof选项= = 'String'）{
VaR方法=美元。FN。screenshotpaste方法{选项}；
如果（方法）{
返回方法（）；
{人}
返回；
}
}
var默认值= {
ImgContainer：， / /图像预览容器
imgheight：200 / /预览的默认高度
}；
选项=扩展（默认值，选项）；
无功imgreader =功能（项目）{
var文件= item.getasfile（）；
VaR的读者= FileReader（）；
reader.readasdataurl（文件）；
reader.onload =功能（e）{
VaR img =新的图像（）；
img.src = e.target.result；
$（IMG）。Css（{身高：选项。imgheight }）；
$（document）。找到（选项。imgcontainer）
html（）
显示（）
附加（IMG）；
}；
}；
事件注册
$（我），（'paste功能（e）{ {）
无功clipboarddata = e.originalevent.clipboarddata；
var项、项、类型；
如果（clipboarddata）{
项目= clipboarddata.items；
如果（！项目）{
返回；
}
项目=项目{ 0 }；
类型= clipboarddata.types | | { }；
对于（var i = 0；i < types.length；i++）{
如果（类型{我} = 'files）{
项目=项目{ }；
打破；
}
}
如果（项目item.kind = 'file' item.type.match（ / ^图像 / /我））{
ImgReader（项）；
}
}
}）；
fn.screenshotpaste.methods = { {美元。
getimgdata：函数（）{
VaR src= $（document）。找到（选项。imgcontainer）。发现（'img）。Attr（'src）；
如果（SRC = = undefined）{
SRC =；
}
返回SRC；
}
}；
}；
}（jQuery）；
以上是本文的全部内容，希望能对大家有所帮助。