背景
最近要做一个ctrl+V 上传图片的组件。简单说就是，使用截屏工具截一张图，然后在某个元素上按ctrl+v操作，需要将截的图上床至服务端，服务端保存图片并返回对应的地址;所以封装了组件做这事，发布出来记录下。
ctrv-upload
手动截屏后，鼠标移动至某元素，按ctrlv进行图片上传。
兼容性说明
由于代码中使用到clipboardData对象及paste事件，目前只能兼容到高版本Chrome，FireFox及IE 11。
实现原理及过程
原理：
- 对于webkit内核，input、textarea、contentEditable属性为true的元素可响应paste事件，可通过事件对象中的clipboardData对象属性访问粘贴板数据。
- 对于FireFox及IE 11，在contentEditable属性为true的元素上进行ctrl+v操作时，会在目标元素中插入img元素，img元素的src属性即为截图的base64数据。
- 获取到图片的base64数据后提交给后台程序php，可在服务端保存为图片。
实现过程
- 在目标元素前插入contentEditable属性为true的div元素，用于响应paste事件；
- 在目标元素上做ctrl+v操作时，响应paste事件，通过event.clipboardData对象或者获取在目标元素中插入的img元素得到图片的base64数据。
- ajax上传图片base64数据至服务端。
安装
npm install ctrv-upload使用
支持AMD与CommonJs的方式加载模块,
直接引入：<script src="xxx/ctrv-upload/index.js">
AMD: define(['xxx/ctrv-upload/index'],function(ctrlVUtil){});
COMMONJS: var ctrlVUtil = require("ctrv-upload");
调用
var load1 = document.querySelector(".js-upload");
// 实例化即可
new ctrlVUtil({
uploadUrl: "server.php",
targetElement: load1,
isCompleteImg:false,
data:{
name:"alanzhang"
},
success:function(data){
alert("上传成功");
console.log(data);
},
error: function(error){
alert("上传失败");
}
});
参数说明
| 名称 | 参数 | 默认值 |
|---|---|---|
uploadUrl |
上传地址 | 需自定义 |
targetElement |
鼠标放在该元素上时，可响应ctrl+v操作 | document.querySelector(".js-upload") |
isCompleteImg |
上传图片base64的格式，false表示只上传content部分，即不包括头信息data:image/jpg;base64，true表示上传完整的base64字符串 |
false |
data |
需要上传的其他参数，json对象 | 空 |
success |
上传成功时的回调函数，其参数为接口返回的json对象 | - |
error |
上传成功时的回调函数，其参数为接口返回的json对象 | - |
API
ctrlVUtil(config)
构造函数，参数：
-
config: 上传图片的相关参数，json对象，具体字段见参数说明。
ctrlVUtil#alertMsg(content)
静态方法，用于弹出异常信息的提示，默认使用window.alert(content)弹出提示；提供此方法用于使用者自定义弹出提示的样式。
-
content:组件给出的异常提示信息
开发
- 源码位于src/index.js，开发完成后执行webpack打包，生成根目录下的index.js。
- 实例项目examples中ctrlVMain.js中引用了根目录下的index.js文件，在运行测试文件时也许进行gulp打包操作。
版本记录
1.0.3 2021-12-14
- 修正readme
1.0.2 2016-08-22
- 修正readme
1.0.1 2016-08-22
- 修正readme
1.0.0 2016-08-22
- 初始化版本，完成代码及文档