事情的起因是这样的，这周在工作时，调用了一个图片转灰度透明的接口，返回来的是一个image字段不是一个url地址，是一个base64编码的字符串，和后端沟通的时候，也明白了为什么返回base64编码，而不是一个url地址，因为后端处理完前端发送过的图片后，根本没存入数据库中，也就没有url地址了，调用的图片转灰度接口，只是一个工具接口而已，并不会产生服务器级别的操作，所以处理完后直接返回一个base64的编码
一般来说，图片在后端的存储方式分为两种：
- 可以将图片以独立文件的形式存储在服务器的指定文件夹中，再
将路径存入数据库字段中; - 将图片
转换成二进制流或base64，直接存储到数据库的 Image 类型字段中.
对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式，我们前端需要将二进制流交由 blob 对象处理，然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。或者将base64直接赋值给src属性
我觉得没人会用第二种吧，毕竟采用第二种方式存储图片，需要的空间太大了，如果前端得到的是base64或者二进制串就得通过一些方法，把格式转换成能展示出图片的编码格式了，一不做二不休，干脆总结一下常用的格式转换方法把
一般来说前端展示图片会通过三种方式： url、base64、blob
url: 一般来说，图片的显示还是建议使用url的方式比较好。
let base64Str = "http://xxxxxx"
$("#img").attr("src",base64Str)
base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。如果图片像loading或者小图标，小图片这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！
let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"
$("#img").attr("src",base64Str)
blob: 当后端返回特定的图片二进制流的时候，前端用blob容器接收二进制流，再通过 URL.createObjectURL生成一个临时blob展示地址
let blob = new Blob([图片二的进制流],{
type:'image/jpeg'})
let url = URL.createObjectURL(blob) //创建URL,
$("#img").attr("src",url)
字符串、url、base64、blob（File）的相互转换
总结出一张我自己画的图：后续发现新东西会持续补充
如果想要更加详细的关系，可参考这张图
url 转 base64
原理： 利用canvas.toDataURL的API转化成base64
function urlToBase64(url) {
return new Promise ((resolve,reject) => {
let image = new Image();
image.onload = function() {
let canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图片插入画布并开始绘制
canvas.getContext('2d').drawImage(image, 0, 0);
// result
let result = canvas.toDataURL('image/png')
resolve(result);
};
// CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
image.setAttribute("crossOrigin",'Anonymous');
image.src = url;
// 图片加载失败的错误处理
image.onerror = () => {
reject(new Error('urlToBase64 error'));
};
}
使用：
let imgUrL = `http://XXX.jpg`
urlToBase64(imgUrL).then(res => {
// 转化后的base64图片地址
console.log('base64', res)
})
blob 转 url
原理： 利用URL.createObjectURL为blob对象创建临时的URL
function translateBase64ImgToBlob(base64,contentType){
var arr = base64.split(',') //去掉base64格式图片的头部
var bstr = atob(arr[1]) //atob()方法将数据解码
var leng = bstr.length
var u8arr = new Uint8Array(leng)
while(leng--){
u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
}
var blob = new Blob([u8arr],{
type:contentType})
var blobImg = {
}
blobImg.url = URL.createObjectURL(blob) //创建URL
blobImg.name = new Date().getTime() + '.png'
return blobImg
}
或者
<label>
选择文件：
<input type="file" id="update" />
</label>
$("#update").change(function(){
let url = URL.createObjectURL(this.files[0])
console.log(url)
})
使用：
var URLData = translateBase64ImgToBlob(base64Str,"image/jpeg")
$("#img").attr("src",URLData.url)
blob 转 base64
原理： 利用fileReader的readAsDataURL，将blob转为base64
blobToBase64(blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
// readAsDataURL
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'));
};
});
}
使用：
blobToBase64(blob).then(res => {
// 转化后的base64
console.log('base64', res)
})
base64 转 Blob
原理： Uint8Array，ArrayBuffer构造
function base64toBlob(dataurl) {
var arr = dataurl.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 });
}
或者
function baseToBlob (b64) {
const byteCharacters = atob(b64)
const byteNumbers = new Array(byteCharacters.length)
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i)
}
const byteArray = new Uint8Array(byteNumbers)
const blob = new Blob([byteArray], {
type: 'image/jpeg' })
return blob
}
//需要你手动去掉data:image/png;base64,
使用：
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
dataURLtoBlob(base64Str)
或者，利用fetch（推荐）
fetch(`data:${
type};base64,${
base64}`).then(res => res.blob())
字符串 和 base64 之间互转
原理：atob 和 btoa
base64 这个利器,相信前端的你不会陌生吧,最常用的操作可能就是图片转 base64 了吧? 在之前 要在字符串跟 base64 直接互转,我们可能需要去网上拷一个别人的方法,而且大部分情况下,你没有时间去验证这个方法是不是真的可靠,有没有 bug, 现在我们可以直接用内置的方法了
let str = btoa("Dsgsg1234567890-=[];'m,,./")
console.log(str) //RHNnc2cxMjM0NTY3ODkwLT1bXTsnbSwsLi8=
console.log(atob(str)) //Dsgsg1234567890-=[];'m,,./
没错,就是这么简单,而且大部分浏览器都支持 除了 IE9-btoa 方法不支持中文和特殊字符，否则会报错
所以保险起见,在转换之前还是 encodeURIComponent/encodeURI一下吧, 当然别忘了在 atob 后,再 decodeURIComponent/decodeURI回来。
let str = btoa(encodeURI("Dsgsg1234567890-=[];'m,,./文档"))
console.log(str) //RHNnc2cxMjM0NTY3ODkwLT0lNUIlNUQ7J20sLC4vJUU2JTk2JTg3JUU2JUExJUEz
console.log(decodeURI(atob(str))) //new_file2.html:80 Dsgsg1234567890-=[];'m,,./文档