将图片地址转为blob格式的例子

简介: 将图片地址转为blob格式的例子

HTML代码:

<div id="forAppend" class="demo"></div>

Javascript代码:

<script>

var eleAppend = document.getElementById("forAppend");

window.URL = window.URL || window.webkitURL;

if (typeof history.pushState == "function") {

var xhr = new XMLHttpRequest();

xhr.open("get", "此处填写您的图片地址", true);

// 数据响应类型 blob

xhr.responseType = "blob";

xhr.onload = function() {

if (this.status == 200) {

var blob = this.response;

var img = document.createElement("img");

img.onload = function(e) {

window.URL.revokeObjectURL(img.src); // 清除释放

};

// 在img放置blob

img.src = window.URL.createObjectURL(blob);

eleAppend.appendChild(img);

}

}

xhr.send();

} else {

eleAppend.innerHTML = '<p style="color:#cd0000;">请更换浏览器重试~</p>';

}

</script>

请务必在环境下运行

目录
相关文章
livp图片怎么打开以及怎么转换成jpg格式教程
livp图片怎么打开以及怎么转换成jpg格式教程
后端返回base64格式数据转excel格式文件并下载
后端返回base64格式数据转excel格式文件并下载
166 0
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
568 1
|
前端开发 API
图片或文件Blob、File、Base64之间的相互转换
在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。 首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
432 1
|
人工智能 Java 对象存储
Java获取阿里云图片临时URL与图片文件转换Base64编码方法
在使用阿里云人工智能产品服务时,有部分服务需要上传的参数中包含文件URL,当我们没有开通OSS服务时,可以使用临时URL服务、或部分服务支持Base64编码格式,此文章为生成临时URL-JavaSDK方案与图片文件转换Base64编码方案。
1939 0
|
3月前
excel 图片地址转成图片
excel 图片地址转成图片
89 1
|
3月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
|
11月前
后端返回的base64流形式的图片,怎么放在src中
后端返回的base64流形式的图片,怎么放在src中
122 0
图片转base64 并根据格式加前缀
图片转base64 并根据格式加前缀
320 0
|
开发工具 文件存储 对象存储
阿里云图片上传返回地址有blob格式问题处理实录
阿里云OSS上传图片功能很多人可能对实现过,正常情况下会返回https开头的图片地址.
阿里云图片上传返回地址有blob格式问题处理实录