将图片地址转为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格式文件并下载
286 0
|
JavaScript 前端开发 应用服务中间件
【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
项目中经常会用到上传图片上传视频等功能,由于后端nginx限制,经常要进行文件转化才能上传,大文件可能还要进行切片上传处理。
707 1
|
前端开发 API
图片或文件Blob、File、Base64之间的相互转换
在做前端项目的时候,遇到图片的上传或者下载时,不可避免的会遇到Blob、File、Base64三种类型的转换。那么今天就总结下,三者之间的相互转换。 首先我们看看base64 ,File 对象,Blob 对象长什么样的,怎么来的。
559 1
|
PHP 调度 数据安全/隐私保护
【源码解读】TP5读取本地图片输出后,设置header头无效,图片乱码
在Thinkphp程序中读取本地图片,做出加工处理(如合并二维码等水印),然后输出给客户端,一直输出图片内容乱码。 设置了header image/png 不生效。 写下这篇TP源码排查文章,看看问题到底出现在哪个步骤。
587 0
【源码解读】TP5读取本地图片输出后,设置header头无效,图片乱码
|
5月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
424 5
|
9月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
后端返回的base64流形式的图片,怎么放在src中
后端返回的base64流形式的图片,怎么放在src中
194 0
图片转base64 并根据格式加前缀
图片转base64 并根据格式加前缀
461 0
|
开发工具 文件存储 对象存储
阿里云图片上传返回地址有blob格式问题处理实录
阿里云OSS上传图片功能很多人可能对实现过,正常情况下会返回https开头的图片地址.
阿里云图片上传返回地址有blob格式问题处理实录