图片base64，file,blob格式的相互转换，以及gif转base64

图片base64，file,blob格式的相互转换，以及gif转base64(第六点)

1、new Image()图片链接转base64

只能转化为普通的jpg/png图片。无法转化gif图
type可以转换为base64和blob
quality图片质量(image/jpeg 或 image/webp 生效)

const imgToBase64 = ({url='',type='base64',quality=1,success=null,imgType='image/jpeg'
}) => {const resultFn=(myCanvas,cb)=>{if(type=='base64'){const dataURL = myCanvas.toDataURL(imgType,quality);success && success(dataURL);cb && cb(true)}else{myCanvas.toBlob((blobData)=>{success && success(blobData)},imgType,quality);cb && cb(true)}}let canvas = document.createElement('canvas'),canvas2=null,canvas3=nullctx = canvas.getContext('2d'),img = new Image();img.crossOrigin = 'Anonymous';//设置跨域img.onload = function () {if(imgType=='image/jpeg' || imgType=='image/webp'){canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);resultFn(canvas,()=>{canvas=null})}else{canvas.height = img.height*quality;canvas.width = img.width*quality;ctx.drawImage(img, 0, 0,canvas.width,canvas.height);resultFn(canvas,()=>{canvas=null})}};img.src = url;
}//使用：
imgToBase64({url:'https://n.sinaimg.cn/tech/transform/774/w320h454/20190312/Jw5G-hufnxfm3452998.gif',type:'bolb',quality:1,success:(res)=>{console.log(res)}
})

2、将blob数据转换为文件

blob对象

const blobToFolder = (blob,cb)=>{const newImg = new Image();const url = URL.createObjectURL(blob);newImg.onload = function() {cb && cb(url)URL.revokeObjectURL(url);};newImg.src = url;
}

3、将blob数据转换为file

blob对象
name文件名

const blobToFile = (blob,name,cb)=>{cb && cb(new File([blob],name,{type:blob.type}));
}

4、将base64转数据转换为blob

urlData:base64数据

const base64UrlToBlob=(urlData) => {var arr = urlData.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}

5、将blob、file转数据转换为base64

urlData:base64或file格式数据

const blobFileToBase64Url=(blobFileData,cb)=>{const fileReader = new FileReader();fileReader.onload = (e) => {cb && cb(e.target.result)};// readAsDataURLfileReader.readAsDataURL(blobFileData);fileReader.onerror = () => {new Error('blobFileToBase64Url error');};
}

6.利用fetch转换图片链接为blob或者base64

优点：异步交互处理,可以实现git转base64
限制：图片可能会存在跨域请求问题

const fetchToBlodBase64=(url,cb,type='base64')=>{fetch(url).then(respone => respone.blob())    // 将响应体转换成blob格式数据.then(blob => {if(type=='base64'){let reader = new FileReader(); reader.onloadend = function(e){cb && cb(e.target.result)};reader.readAsDataURL(blob);}else{cb && cb(blob)}}).catch(console.error);
}

汇总方法

//file图片压缩并返回file文件
const compressionImg=(file,quality,cb)=>{blobFileToBase64Url(file,base64=>{//转base64imgToBase64({//转bolb,并压缩url:base64,type:'bolb',quality:quality,success:(bolb)=>{blobToFile(bolb,'img',(changeFile)=>{//转fileconsole.log(changeFile)})}})})
}
// 普通url链接图片压缩并下载
//  下载图片
const downloadFile=(content,fileName='')=>{let aLink = document.createElement('a')aLink.download = fileName;aLink.setAttribute('href',content)aLink.click()
}
// 压缩并下载
const compressionDownloadImg=(url,quality)=>{imgToBase64({url:url,type:'bolb',quality:quality,success:(bolbData)=>{blobToFolder(bolbData,folderData=>{downloadFile(folderData,'img.png')})}})
}

其他（文件流转化为excel文件）

const fileStreamToExcel = (res, name = '数据统计') => {if (!res) {alert('暂无数据')return false}if (res && res.status) {return false}const blob = new Blob([res])if (window.navigator.msSaveBlob) {// 兼容ie 鬼使用iewindow.navigator.msSaveBlob(blob, `${name}.xls`)} else {// 主流浏览器const elink = document.createElement('a')elink.download = `${name}.xls`elink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)}}

图片base64，file,blob格式的相互转换，以及gif转base64相关推荐

base64、blob格式相互转换及应用
1.Base64 to Blob function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), //分割为数组,分割到第一个逗号let ...
vue图片转file文件类型
vue图片转为File文件类型供参考,欢迎指教文章目录 vue图片转为File文件类型图片转为base64格式 base64格式转为File文件类型使用 File文件转base64格式使用 ...
图片或文件Blob、File、Base64之间的相互转换
Blob.File.Base64之间的相互转换前言 base64 转 Blob 对象 base64 转 File 对象 File 对象,Blob 对象转base64 blob链接转 base64 ...
img 格式相互转换 url, base64，blob, file
正常向后端传的文件就是file格式,存储到文件服务器 url -> base64 -> file url -> blob -> file url -> base64 - ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...
base64图片转file的处理
注意:后端返回的base64图片,有的没有code,可能会遭遇响应拦截器拦截,要去主动解除限制 request.js中 //数据处理错误接口}else if(res.code == 400){mess ...
如何将图片转换base64格式？data:image/png;base64又是什么？
一.我们在看代码时经常在img或css背景图片中看到: src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAA ...
图片/视频url 转 File Blob
图片转Base64 由于 onload 方法是异步的便于取值, 用 Promise 封装一下 function urlToBase64(url) {return new Promise((resol ...
html2canvas图片生成file格式传送到后台服务器
1.首先将html保存为base64图片 html2canvas.js(可在各cdn进行下载) eg: cdn.bootcss.com/html2canvas- html2canvas百度一下代码很多 ...

图片base64，file,blob格式的相互转换，以及gif转base64

图片base64，file,blob格式的相互转换，以及gif转base64(第六点)

1、new Image()图片链接转base64

2、将blob数据转换为文件

3、将blob数据转换为file

4、将base64转数据转换为blob

5、将blob、file转数据转换为base64

6.利用fetch转换图片链接为blob或者base64

汇总方法

其他（文件流转化为excel文件）

图片base64，file,blob格式的相互转换，以及gif转base64相关推荐

最新文章

热门文章