js如何获取图片url的Blob值并预览示例代码
前言
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
本文主要给大家介绍了关于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实现把图片的绝对路径转为base64字符串、blob对象再上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j
-
js如何获取图片url的Blob值并预览示例代码
前言 Blob 对象表示一个不可变.原始数据的类文件对象.Blob 表示的不一定是JavaScript原生格式的数据.File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件. 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下 1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var
-
ie8本地图片上传预览示例代码
复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func
-
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
本文实例讲述了JS实现获取图片大小和预览的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
JS实现获取当前URL和来源URL的方法
本文实例讲述了JS实现获取当前URL和来源URL的方法.分享给大家供大家参考,具体如下: index.html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,max
-
php使用正则表达式获取图片url的方法
本文实例讲述了php使用正则表达式获取图片url的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <?php header("Content-type:text/html;charset=utf-8"); $str = '<p><img src="images/11111111.jpg" alt="美女" /></p>'; $pattern = "/[img|IMG].*
-
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
-
js自己实现一个大文件切片上传+断点续传的示例代码
目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,
-
微信小程序实现图片上传、删除和预览功能的方法
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i
-
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u
-
微信小程序获取公众号文章列表及显示文章的示例代码
微信小程序中如何打开公众号中的文章,步骤相对来说不麻烦. 1.公众号设置 小程序若要获取公众号的素材,公众号需要做一些设置. 1.1 绑定小程序 公众号需要绑定目标小程序,否则无法打开公众号的文章. 在公众号管理界面,点击小程序管理 --> 关联小程序 输入小程序的AppID搜索,绑定即可. 1.2 公众号开发者功能配置 (1) 在公众号管理界面,点击开发模块中的基本配置选项. (2) 开启开发者秘密(AppSecret),注意保存改秘密. (3) 设置ip白名单,这个就是发起请求的机器的外网i
随机推荐
- 用prototype实现的简单小巧的多级联动菜单
- js动态往表格的td中添加图片并注册事件
- 更新了Xcode8 及 iOS10遇到的问题小结
- PHP连接MYSQL数据库的3种常用方法
- C#中委托的+=和-=深入研究
- C语言与JAVA的区别是什么(推荐)
- sql server中随机函数NewID()和Rand()
- php常用文件操作函数汇总
- Mac OS下配置PHP+MySql环境
- Windows下PyMongo下载及安装教程
- 提高编程技能的11个建议
- asp之基于adodb.stream的文件操作类
- 基于php权限分配的实现代码
- Android Studio下添加assets目录的实现方法
- JavaScript极简入门教程(三):数组
- js检查页面上有无重复id的实现代码
- java中rss解析器(rome.jar和jdom.jar)示例
- 提问的智慧
- Android模拟登录评论CSDN实现代码
- PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例