js 获取图片url的Blob值并预览

1）使用 XMLHttpRequest 对象获取图片url的Blob值

参考：https://www.cnblogs.com/tujia/p/6483255.html

//获取图片的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图片前端预览之 filereader 和 window.URL.createObjectURL

 1 //preview img ： filereader方式2     document.getElementById('imgFile').onchange = function(e){ 5         var ele =  document.getElementById('imgFile').files[0];6 8         var fr = new FileReader();9         fr.onload = function(ele){
10
11             var pvImg = new Image();
12             pvImg.src = ele.target.result;
13             pvImg.setAttribute('id','previewImg');
14
15             $('.preview_wrap').html('').append(pvImg);18         }
20         fr.readAsDataURL(ele);
21     }

 1 //preview img ： URL.createObjectURL 方式2     document.getElementById('imgFile').onchange = function(e){5         var ele =  document.getElementById('imgFile').files[0];6 7         var createObjectURL = function(blob){8           return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);9         };
10         var newimgdata = createObjectURL(ele);
11
12         var pvImg = new Image();
13         pvImg.src = newimgdata;
14         pvImg.setAttribute('id','previewImg');
15
16         $('.preview_wrap').html('').append(pvImg);
21     }

以上先贴出用filereader 和 URL.createObjectURL 两种预览方式。

按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。

最近做了一个需要上传图片预览的项目，用的最简单的input file上传，最开始想到的就是用filereader实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上，比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片！但在该手机的微信，浏览器内上传均可以！

看了下代码，如下图，是因为base64编码内缺少了图片格式，手动加上image/jpg图片立即显示，刚开始以为是readAsDataURL的问题，没有编码成功，找了一晚上原因，无解！不知哪根筋搭错突然想到打印出input file的type看看，发现type为空，而file的其他属性均正常。

继续百度（google最近公司FQ不稳定，没法用），结果看到有人遇到类似奇怪问题，但是没有解决。

无意间却发现图片预览除了filereader还可以用url.createObjectURL。晚上11点26，先赶最后一班地铁。

=====================

第二天一早，把半夜的灵感实验了下，根据判断input file的图片类型，如果不存在就给文件手动赋值类型。（见下方调试用代码，有点乱）

结果发现file的type并不是你直接赋值就可以改变的，没有用！

于是开始实践URL.createObjectURL (见最上面的第二部分代码)

神奇！发现预览正常！

js 获取图片url的Blob值并预览相关推荐

访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载
在做谷粒学院项目时候,因为老师没有做轮播图的后台前端,这里我自己实现了一下,遇到一个问题,我先做出轮播图列表来: 这里阿里云存储的图片URL直接展示出来了,我觉得这里应该显示图片更好, 后来在网页里使 ...
JS实现图片上传时的本地预览，兼容IE和firefox谷歌
旁白: 一般来说如果要实现在上传前预览图片的话,用纯服务器端的语言必定是办不到的,需要先传到服务器上,哪怕是只是服务器上的临时文件,这也是个很麻烦的事情,不过可以用javascript来做这件事.下面 ...
JS获取图片的EXIF信息+纠正图片方向
前端图片处理碰到的一个离奇 bug , 关于图片的 EXIF 信息,特地记录下来 . 然后使用一下代码可以获取Orientation信息,并纠正Orientation带来的图片旋转问题 // from ...
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
Js获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解.插件. **应用场景:**在很多时候,前端开发过程中需要动态的获取图片的主要的颜色值,并根据主色调去调整主题样式的颜色或者模拟 ...
编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
android 根据文件Uri获取图片url
今天,简单讲讲android里如何通过文件的Uri获取文件的路径url. 昨天,我讲了如何调用手机的文件管理器获取文件资源,但是文件管理器返回的是文件的Uri,我们需要通过Uri获取文件的url才可以 ...
php 获取内容页图片,织梦DEDECMS内容页获取图片URL地址的方法
织梦DEDECMS内容页获取图片URL地址的方法 {dede:sql sql="select * from dede_uploads where arcid = ~id~"} [f ...
php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...
本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: var values=function(object) { var values ...
js获取图片真实尺寸 - 代码篇
js获取图片真实尺寸 - 代码篇代码案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

js 获取图片url的Blob值并预览

js图片前端预览之 filereader 和 window.URL.createObjectURL

js 获取图片url的Blob值并预览相关推荐

最新文章

热门文章