利用blob对象实现粘贴图片
blob的一个常用应用场景,就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后,需要在网页上进行粘贴操作。
粘贴图片我们需要解决下面几个问题
1、监听用户的粘贴操作
2、获取到剪切板上的数据
3、将获取到的数据渲染到网页中
首先我们可以通过paste事件来监听用户的粘贴操作:
document.addEventListener('paste', function (e) {
console.info(e);
});
然后,可以通过事件对象中的clipboardData 对象来获取图片的文件数据。
clipboardData对象介绍
介绍一下 clipboardData 对象,它实际上是一个 DataTransfer 类型的对象, DataTransfer 是拖动产生的一个对象,但实际上粘贴事件也是它。
items 介绍
items 是一个 DataTransferItemList 对象,自然里面都是 DataTransferItem 类型的数据了。
types介绍
一般 types 中常见的值有 text/plain 、 text/html 、 Files 。
有了上面这些方法,我们可以解决第二个问题即获取到剪切板上的数据。
document.addEventListener('paste', function (e) {
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
var cbd = e.clipboardData;
for(var i = ; i < cbd.items.length; i++) {
var item = cbd.items[i];
console.info(item);
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === ) {
return;
}
console.info(blob);
}
}
});
最后,我们需要将获取到的数据渲染到网页上。其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接将获取到的文件上传到服务器,然后通过服务器返回的url地址来对图片进行渲染;也可以使用fileRender对象来进行图片本地浏览。
fileRender对象简介
从Blob中读取内容的唯一方法是使用 FileReader。FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
FileReader对象以前介绍过,不多说。通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。
document.addEventListener('paste', function (e) {
var cbd = e.clipboardData;
var fr = new FileReader();
for(var i = ; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === ) {
return;
}
fr.readAsDataURL(blob);
fr.onload=function(e){
var result=document.getElementById("result");
//显示文件
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}
}
});
利用blob对象实现粘贴图片的更多相关文章
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- 利用blob对象实现大文件分片上传
首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...
- js,JQ 图片转换base64 base64转换为file对象,blob对象
//将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...
- Base64图片转Blob对象
//将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- js粘贴图片并显示
var fromDa; $(function(){ document.getElementById('app').addEventListener('paste', function(e) { if( ...
- KindEditor4.1.10,支持粘贴图片(转载!)
本人扩展了KindEditor4.1.10,使得他能够在Chrome和IE11中直接粘贴复制的图片(比如通过截图工具把图片直接保存在剪切板中),然后调用上传URL上传图片 方法,修改kindedito ...
随机推荐
- Codeforces.314E.Sereja and Squares(DP)
题目链接 http://www.cnblogs.com/TheRoadToTheGold/p/8443668.html \(Description\) 给你一个擦去了部分左括号和全部右括号的括号序列, ...
- SNOI 滚粗记
连睡觉都只能睡一半就吓醒 真的蠢 CE了四道 没有cstring 踏马本机怎么能过??!! 还有几次夏令营什么的 可能水水就结束了 最单纯的拿点优惠的想法也没实现 都说以后会有用的 大概是吧 也大概是 ...
- lvs+keepalived 02
LVS keepalived 高可用负载均衡 环境 IP HOSTNAME Describe 192.168.100.30 lvs01 主负载 192.168.100.31 lvs02 备负载 192 ...
- MyEclipse使用总结——设置MyEclipse使用的Tomcat服务器
一.设置使用的Tomcat服务器 如果不想使用MyEclipse自带的tomcat服务器版本,那么可以在MyEclipse中设置我们自己安装好的tomcat服务器 设置步骤如下: Window→Pre ...
- iOS 线程之GCD的高级使用方法
之前的一篇关于线程的blog已经为大家介绍了GCD的简单使用方式及样例说明,今天因为项目中有特殊的应用GCD的实例,为大家介绍两种特殊需求的使用GCD的方法. 目的:实现一件事情做完,再做下一件事情. ...
- GoJS 、 GoDiagram
http://gojs.net/latest/intro/makingSVG.html http://www.nwoods.com/ http://gojs.net/latest/intro/shap ...
- Unity3D实践系列10, Canvas画布的创建和使用
Canvas是所有ui元素的父物体. 当添加一个Button类型的GameObject后,在"Hierarch"窗口中自动添加了一个Canvas,以及EventSystem. 在C ...
- Android Service总结04 之被绑定的服务 -- Bound Service
Android Service总结04 之被绑定的服务 -- Bound Service 版本 版本说明 发布时间 发布人 V1.0 添加了Service的介绍和示例 2013-03-17 Skywa ...
- Ubuntu14.04LTS下使用eclipse搭建Cocos2d-x的Android环境
from://http://www.58player.com/blog-2534-94136.html 最近想玩玩游戏制作,于是选择了目前流行的游戏引擎Cocos2d-x,这个东西虽然有Android ...
- mysql update select
根据文件名 更新外键ID UPDATE tb_obj INNER JOIN tb_img ON tb_img.filename=tb_obj.filename SET tb_objinfo.img ...