js 获取图片url的Blob值并预览
1)使用 XMLHttpRequest 对象获取图片url的Blob值
//获取图片的Blob值
function getImageBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
if(cb) cb(this.response);
}
};
xhr.send();
}
注意这里的XMLHttpRequest必须使用异步模式,同步模式不能设置 responseType = "blob"
2)使用 FileReader 对象获取图片 Blob 对象的 data 数据
function preView(url){
let reader = new FileReader(); getImageBlob( url , function(blob){
reader.readAsDataURL(blob);
}); reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.body.appendChild(img);
}
}
完。
js 获取图片url的Blob值并预览的更多相关文章
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- 图片处理:html文本获取图片Url,判断图片大小,存数据库
1.从html文本获取图片Url /** * html文本中取出url链接 */ public class Url { public static void main(String[] args) { ...
- Js获取后台集合List的值和下标的方法
Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- js获取每个按键的ASCII值
通过js绑定键盘按下事件onkeydown获取每个按键的ascII值. js获取每个按键的ascii值 <script language="javascript"> / ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- 网站开发进阶(十八)js获取html标签中的值
js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...
随机推荐
- ubuntu tftp 配置
1:sudo apt-get install tftp tftpd openbsd-inetd特别指出很多文章里用的是netkit-inetd,但是实际下载时发现这个软件是下不到的,特改用openbs ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 【转】【C#】判断当前操作系统
写一个判断操作系统的工具类OSHelper.cs public class OSHelper { // 获取操作系统ID public static System.PlatformID GetPlat ...
- POI生成EXCEL,公式不自动执行的有关问题
POI生成EXCEL,公式不自动执行的问题 场景:POI读取Excel模板. 当使用POI操作Excel时,发现由POI生成的公式能够在打开Excel是被执行, 而事先手工写入Excel模板文件的公式 ...
- pthread_join直接决定资源是否能够及时释放
/*http://hankjin.blog.163.com/blog/static/33731937201072675024100/ pthread的内存泄露 # cc thread.c -lpthr ...
- 跟我学TCP/IP系列
最近在微信公众号“java与Android开发专栏”,看到系列文章“跟我学TCP/IP系列”,共7章,文章很赞. 系列文章在CSDN上也有分发,下列出地址以备以后查看(版权问题不转载内容). http ...
- wso2as安装
1.系统环境 Ubuntu12.04 192.168.0.97 root/password找管理员 Ubuntu12.04 192.168.0.99 root/password ...
- Elasticsearch 5
Elasticsearch 5常见问题解决方案 安装运行 1.前置安装java8 jdk-8u112-linux-x64.rpm 下载地址:http://www.oracle.com/tech ...
- history统计命令最多的20条
1.1.1 统计使用命令最多的20条 [root@ob1 ~]# history|awk '{ml[$2]++}END{for (i in ml) print i,ml[i]}'|sort -nrk ...
- iOS开发中的错误整理,导航控制器的导航栏取消系统渲染的错误