网络图片转换为文件类型
文章目录
- 普通图片连接转化为文件实现
- 1、图片链接转base64
- 1. 利用`canvas`转换
- 2. 利用ajax转换
- 3. 利用fetch转换
- 2、base64转化为文件类型
以下的图片转文件如果涉及跨域的问题,需要服务端支持图片跨域(常见的就是用了OSS存储图片的,需要在控制台开启允许跨域请求)
如果oss控制台已经开了允许跨域依然是偶尔出现报错的话,可以在图片后面带一个随机数/时间戳即可解决,譬如:'http://xxxx.jpg?t'=+new Date().getTime()
普通图片连接转化为文件实现
这边用一张 gif
图来实现
1、图片链接转base64
1. 利用canvas
转换
限制:只能转化为普通的jpg/png图片。无法转化gif图
const imgToBase64 = (url,cb) => {var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),img = new Image;img.crossOrigin = 'Anonymous';img.onload = function () {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL('image/png');cb && cb(dataURL);canvas = null;};img.src = url;
}// 执行
imgToBase64('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif',base =>{console.log(base) // 转换后的base64图片编码
})
2. 利用ajax转换
限制: 1、依赖JQ 2、XMLHttpRequest Level 2才支持设置响应数据类型为blob格式 3、图片可能会设计跨域问题
优点:可以转换gif等任意图片类型
$.ajax('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif', {xhrFields: {responseType: 'blob' // 指定响应数据类型为blob格式}}).then(blob => {let reader = new FileReader();reader.onloadend = function () {console.log(reader.result); // 转换后的base64图片编码};reader.readAsDataURL(blob);}).catch(console.error);
3. 利用fetch转换
限制:图片可能会存在跨域请求问题
优点:异步交互新星
与ajax请求类似
fetch('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif').then(respone => respone.blob()) // 将响应体转换成blob格式数据.then(blob => {let reader = new FileReader(); reader.onloadend = function(){console.log(reader.result); // 转换后的base64图片编码};reader.readAsDataURL(blob);}).catch(console.error);
2、base64转化为文件类型
通过上面的方法已经得到了想要的图片的base64
类型
接下来就是需要把 base64
再次转化为文件。用于提交等操作
const base64toFile = (base, filename) => {var arr = base.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//转换成file对象return new File([u8arr], filename, { type: mime });
}
完整的转化代码(以ajax
请求转化为例):
案例中使用了 promise
进行再次封装了一下。让代码看起来更加清晰,需要一定的es6
基础
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><script>/*** @ ajax 请求获取base64格式* @param {String} url 需要请求的图片的连接* @return {Promise} promise对象*/const getBase = (url) => {return new Promise((resolve, reject) => {$.ajax(url, {xhrFields: {responseType: 'blob', // 指定响应数据类型为blob格式},}).then(blob => {let reader = new FileReader();reader.onloadend = function () {resolve(reader.result)};reader.readAsDataURL(blob);}).catch(error => {reject(error)});})}/*** @ base64转化为对应的文件* @param {String} base base64字符 * @param {String} name 文件名称* @return: {file} 返回的文件*/const base64toFile = (base, name) => {var arr = base.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//转换成file对象return new File([u8arr], name, {type: mime});}/*** @ 图片转化为文件类型* @param {String} url 请求图片的地址 * @param {String} name 转换后的文件名称* @return: {file}*/const imgUrlToFile = async (url, name = 'file') => {let fileObj = {};await getBase(url).then(base => {fileObj = base64toFile(base, name);})return fileObj;}imgUrlToFile('https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif','gif文件').then(fileObj => {console.log(fileObj); // 打印出来的file类型})</script>
</body></html>
打印结果:
网络图片转 base64
和转化为文件类型
就这样了
网络图片转换为文件类型相关推荐
- 网络图片转换为文件类型(File)
以下的图片转文件如果涉及跨域的问题,需要服务端支持图片跨域(常见的就是用了OSS存储图片的,需要在控制台开启允许跨域请求) 如果oss控制台已经开了允许跨域依然是偶尔出现报错的话,可以在图片后面带一个 ...
- 【JS实战】base64转换为file文件类型(上传头像为例子)
base64转换为file类型 点击头像,选择文件 点击选取时,获取base64文件 这里使用了Vue-ImgCut插件(后续博客介绍) 代码讲解 function base64toFile(data ...
- canvas生成图片上传服务器,网络图片生成图片文件
vue+canvas 生成签名图片并保存数据库 VUE+ElementUI 最近根据项目需求 在用户生成订单的时候需要附上自己的签名照片,因为考虑到不能上传图片所以使用canvas画图功能. 而目前后 ...
- Linux操作系统下以不同颜色命名的文件类型
蓝色文件----------目录 白色文件----------一般性文件,如文本文件,配置文件,源码文件等 浅蓝色文件----------链接文件,主要是使用ln命令建立的文件 绿色文件------- ...
- c语言中的文件类型只有文本文件一种,C语言中的文件类型只有哪两种_后端开发...
pycharm能干嘛_后端开发 PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示 ...
- 利用文件头判断文件类型
上传文件时经常需要做文件类型判断,例如图片.文档等,普通做法是直接判断文件后缀名,而文艺青年为了防止各种攻击同时也会加上使用文件头信息判断文件类型. 原理很简单:用文件头判断,直接读取文件的前2个字节 ...
- 《编写高质量代码:改善c程序代码的125个建议》——建议4-1:整数转换为新类型时必须做范围检查...
本节书摘来自华章计算机<编写高质量代码:改善c程序代码的125个建议>一书中的第1章,建议4-1,作者:马 伟 更多章节内容可以访问云栖社区"华章计算机"公众号查看. ...
- C语言指针转换为intptr_t类型
C语言指针转换为intptr_t类型 1.前言 今天在看代码时,发现将之一个指针赋值给一个intptr_t类型的变量.由于之前没有见过intptr_t这样数据类型,凭感觉认为intptr_t是int类 ...
- numeric转换varchar_数据库中varchar类型数据转换为numeric类型
关于数据库中varchar/nvarchar类型数据的获取注意事项 当在页面后台获取数据库表中某字段的数据时,需注意该数据的类型.防止因实际数据的字符长度因达不到指定数据类型规定的字符长度而导致空格的 ...
最新文章
- PHP--------解决网址URL编码问题
- python 决策树 math库 c45算法
- html css精灵,谈谈CSS Sprites(css精灵)
- [渝粤教育] 西南科技大学 复习资料 法理学
- 【算法设计与分析】07 算法的数学基础
- 32个程序员泪(méng)流(fān)满(quán)面(chǎng)的瞬间
- 卷起来了,写了一套Tensorflow和Pytorch的学习笔记(20G/代码/PPT/视频)
- 如何开具和交付给客户电子发票
- java cucumber_Cucumber框架入门篇
- Ubuntu 18.04中安装飞行模拟器FlightGear 2018.2.1
- 台式机安装黑苹果-新手教程
- 【裴礼文数学分析】例1.1.1
- python实时语音转写_实时语音转写 API 文档
- android相关素材以及网站
- 对比学习(contrastive learning)
- 2021-05-23:pandas 新增sheet,不覆盖原来已经保存的sheet
- 玩的第一个黑客小游戏,isa test
- mysql 一对多 count_MySQL COUNT的一对多总和
- Android OpenGLES滤镜开发之仿抖音灵魂出窍
- 我个人整理的AD/2000技巧,各位收藏吧!60多个。 转贴
热门文章
- 大数据变现实践:微博百亿营收背后的数据挖掘技术
- beetl模板使用场景_Java 模板引擎 Beetl 2.0 发布
- NDK学习笔记:一起来变萝莉音!FMOD学习总结(下)
- 每一步都要确保投资人利益—MDU价格保障机制之销毁
- springboot毕设项目公共场所安保信息管理系统v2rtn(java+VUE+Mybatis+Maven+Mysql)
- Processing编程学习指南2.4 速写本
- eclipse报错!!!!
- VMware Cloud Foundry –见解
- JMeter压力测试,mongodb教程视频百度云
- 快速读懂Depth-wise Convolution