前端传来的图片并保存_前端处理后端接口传递过来的图片文件
背景
在之前,从来都是后端返一个图片地址,然后前端直接使用。 那如果后端返了一个图片文件过来,那要怎么做?
参考:
vue axios请求图片流文件前端页面显示处理方法
background url base64
js动态创建样式: style 和 link
正文
这次我接收到的直接是一个图片文件,然后乱码了。。 如下图
要怎么处理呢?
首先是第一步,请求处理,下面我分别列出了axios、fetch、jq、原生js的处理方式
1.修改请求
1.1. axios
重点在于添加option: responseType: 'arraybuffer'
let url = `imgurl`;
axios.get(url,{responseType: 'arraybuffer'}).then(function(data){
console.log(data);
}).catch(function(err){
error(err)
});
复制代码
1.2. fetch
我们在使用fetch的时候,会有一个response的对象处理过程。 普遍我们都是使用的 response.json(),但这次我们需要进行response.arrayBuffer()处理
fetch(url)
.then(function(response){
if(response.ok) {
return response.arrayBuffer(); // 这一行是关键
}
throw new Error('Network response was not ok.');
})
.then(function(data){
console.log(data)
})
.catch(function(error){
});
复制代码
1.3. JQ-ajax
如果使用jq封装的ajax,那么抱歉,这个功能用不了。
jq封装的ajax是基于xhr第一版本的,而ArrayBuffer是基于xhr第二版本的
这种情况就推荐使用原生js来写
1.4. 原生js
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // 重点
let that = this; // 这个不是必须,只是用来保存this的指向
xhr.onload = function(e){
if (this.status == 200) {
let result = this.response;
console.log(result)
}
};
xhr.send();
复制代码
补充知识点
responseType设置的是啥? arraybuffer又是啥?
这些内容估计又可以开一篇文章来写了,详细的可以参考以下网址:
MDN-XMLHttpRequest.responseType
阮一峰-二进制数组
2.处理返回值
好了,我们现在已经获取到了我们需要的二进制数组(arrayBuffer) 下一步,我们要把图片显示处理,使用base64编码即可
let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
// 这里如果不清楚 new Uint8Array(data.data) 中data的指代,就看看最上面的那个图
复制代码
这样能将图片进行编码,然后做前端缓存(如果用localStorage缓存blob,存能成功,但是刷新后再取出来是看不见图片的)。
解释一下各自含义:
data: ----获取数据类型名称
image/png; -----指数据类型名称
base64 -----指编码模式
AAAAA ------指编码以后的结果。
3.使用
2种方法:
如果使用vue这类框架,可以直接style赋值
创建动态style,创建动态css
第一个这个使用就不说了,直接src=imgUrl;
//vue
"imgUrl">
复制代码
第二个我们要做的就是创建style节点,并添加在head种
if(document.all){ // document.createStyleSheet(url)
window.style=`.imga{background-img: url(${imgUrl});`;
document.createStyleSheet("javascript:style");
}else{ //document.createElement(style)
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML=`.imga{background-img: url(${imgUrl});`;
document.getElementsByTagName('HEAD').item(0).appendChild(style);
}
复制代码
这样,就动态创建了相应的style样式。 然后给需要的地方添加上 .img 即可
...
...
div
...复制代码
前端传来的图片并保存_前端处理后端接口传递过来的图片文件相关推荐
- uni-app - 头像图片裁剪组件(支持多种裁剪,手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化)全端完美兼容 H5 App 小程序,最好用的图片上传后裁剪插件教程源代码
前言 网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了 完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
- 前端图片合成技术_前端图片合并方案调研
介绍 通过产品线数据分析,发现70%左右的图片为小于300K的图片,50%左右为小于100K的图片,因此调研前端图片合并方案是否有利于提高图片批量上传速度.之前做过的前端ZIP方案也是类似的思路. 工 ...
- 前端工程师需要学习ps 吗_前端人员一定要掌握的PS技巧
一.PS与前端知多少 一般我们会认为PS是用来修改图片的,这些工作是美工人员做的事不是前端人员做的,其实这样想你就错了,因为在前端人员也是要学会一些简单的关于PS的技巧的,这样就不会应为一点点小小的需 ...
- python语言编写一个生成九宫格图片的代码_用Python一键生成炫酷九宫格图片,火了朋友圈...
作为一个男同胞来说,为了给女朋友拍一张美美的照片,着实需要花费很大的时间和精力,不仅仅需要从众多的图片中精心挑选,而且还需要有着超强的图片精修能力,才能得到一张张达到女友要求的图片,真心不容易啊- 朋 ...
- winform剪贴板如何同时存储图片和文字_你真的会在Word里插入图片吗?没那么简单!...
点击上方[word精品教程]-右上角[...]-[设为星标⭐] 即可第一时间获取最新办公资讯 作者:Cxiaon 来源:松鼠App推荐站(ID:TuoYanSS) 今天来讲讲图片插入,经常会遇到一种 ...
- excel 画散点图 怎么设置图片的分辨率_干货纯享 | 你所忽略的论文图片处理技巧...
医学论文中常常通过图片反映实验过程.数据结果.病案实例等内容,这不仅可以为论文内容提供素材与依据,也能让读者对实验结果与临床治疗有清晰直观的认知,使文章整体更具有客观性.真实性和科学性.同时,图片处理 ...
- java 图片格式校验_(转载)Java对上传的图片进行格式校验以及安全性校验
文章目录 前言 判断上传的是否是图片 通过后缀名进行判断 通过文件头 通过ImageIO判断 图片文件的安全检查处理 给图片加水印 前言 在web开发中,肯定会有一些图片上传的功能,如果仅仅是通过页面 ...
- ajax java 图片加载_如何用Ajax加载服务器的图片
用Ajax请求服务器的图片,并显示在浏览器中 前言 一直在数据库里面存的都是图片在服务器的地址,然后再到浏览器中显示,但是发现两个问题 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js ...
- 前端面试技巧和注意事项_前端面试百分之九十九过的技巧
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂-- 今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及. 需求减少要求肯定 ...
最新文章
- MotionEvent的getX(),getY()与getRawX(),getRawY()区别
- DBA_Oracle Database 11g 面向 DBA 和开发人员的重要特性
- postgresql测试题_PostgreSQL练习
- 程序调用mysql突然变慢_排查Mysql突然变慢
- html5 保存 搜索历史,html5 – 如何有效处理Dart中的浏览器历史记录(即后退按钮)?...
- SpringCloud的学习记录(1)
- 背板,线速,交换容量详细解说
- iPhone 12/13正面对比图曝光:祖传大刘海终于有所改变
- 一个电脑安装多个系统的几个办法
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- Markdown初使用
- 博图安装msi失败_博途,V13,安装出现如此问题如何解决
- 【开源教程5】疯壳·开源编队无人机-飞控固件烧写
- bib文件引用参考文献方法--心得
- 财务系统如何避免对账时一分钱误差?
- 关于handler子线程通知主线程的几种写法
- 分布式系统设计系列 -- 基本原理及高可用策略
- OPPOR8107_官方线刷包_救砖包_解账户锁
- 烽火推系统源码,抖音矩阵系统源码,look look 。
- HTML登陆界面编程代码
热门文章
- Unnamed System Edition v4.0
- 华为畅享8plus能申请鸿蒙吗,华为畅享8Plus
- 中鸣循迹机器人_自动循迹机器人控制系统的设计
- 锦囊妙计解决elasticsearch集群为red状态
- 心灵震撼《一个8岁女孩的遗书》
- linux系统用户和普通用户,适合普通Linux用户的五大Linux发行版
- hive 的like与rlike,not like,linke not,coalesce函数使用
- PythonOCC封装:2.重新封装pythonocc
- 牛客寒假算法基础集训营4-I.爆炸的符卡洋洋洒洒
- php写动物的属性,状物的记叙文类型——描述动物