图片获取、格式转换与后台存储

后端是如何存储图片的呢？

1. 将图片以独立文件的形式存储在服务器的文件夹中，再将该文件路径存入数据库中.
2. 将图片转化为二进制流，直接存储到数据库的Image类型字段中.

第一种方式存储，则前端可以直接将存储路径赋值给src属性显示图片.
第二种方式存储，则前端得到的是二进制流数据，需将二进制流交由blob对象处理，然后通过blob的API生成临时的URL赋值给src属性来显示图片.

个人认为第一种方式存储更好，一张图片有几M,则大量图片存储在数据库中，则会影响数据库的性能。

第二种方式生成临时URL代码如下:

createURL(blob){ 
   let img=document.createElement('img'); 
   img.onload=function(e){//img的onload事件销毁URL
   window.URL.revokeObjectURL(img.src);
}
   img.src=window.URL.createObjectURL(blob)//根据blob二进制流数据生成临时URL,且URL以blob开头  
   document.querySelector('.haha').appendChild(img);
}

假设服务端接口只接收url、base64、blob中的一种格式的图片数据，然而前端得到的图片对象与服务端格式不同，那前端js如何使其转换为相对应的格式呢？

图片的三种格式转换图：

1.url转化base64

//转化原理：利用canvas.toDataURL的API转化成base64
    urlGetBase64(url){   
       return new Promise((resolve,reject)=>{   
       let image=new Image();    
       image.onload=function(){    
             let canvas=document.createElement('canvas');    
             canvas.width=100;     
             canvas.height=100;   
             canvas.getContext('2d').drawImage(image,0,0);     
             let result=canvas.toDataURL('image/png');    
             resolve(result);   
             };   
             image.setAttribute("crossOrigin",'Anonymous');     
             image.src=url;    
             image.onerror=()=>{    
             reject(new Error('图片流异常'));   
                };   
             }) 
           }

调用方法:

let imgUrl=`http://aaa.jpg`;
	this.urlGetBase64(imgUrl).then(res=>{
	console.log('url转化为base64格式:',res);
})

举例子：在网上找到一张url格式的图片

https://t9.baidu.com/it/u=1761131378,1355750940&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1584854630&t=a9403a3590083ce60f15eacf1ffa589e

在vscode运行如下代码：

export class ShowImageComponent implements OnInit {
imgData:any="https://t9.baidu.com/it/u=1761131378,1355750940&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1584854630&t=a9403a3590083ce60f15eacf1ffa589e"

  constructor() { }
  ngOnInit(): void {
    this.urlGetBase64(this.imgData).then(res=>{
      this.imgData=res;
      console.log("图片的base64格式:",res);
          })
  }
  
  urlGetBase64(url){   
    return new Promise((resolve,reject)=>{   
    let image=new Image();    
    image.onload=function(){    
          let canvas=document.createElement('canvas');    
          canvas.width=200;     
          canvas.height=300;   
          canvas.getContext('2d').drawImage(image,0,0);     
          let result=canvas.toDataURL('image/png');    
          resolve(result);   
          };   
          image.setAttribute("crossOrigin",'Anonymous');     
          image.src=url;    
          image.onerror=()=>{    
          reject(new Error('图片流异常'));   
             };   
          }) 
        }
}

运行效果+控制台打印并查看base64格式数据

2.base64转换blob

base64GetBlob({base64Data='',contentType='',sliceSize=512}={}){ 
 return new Promise((resolve,reject)=>{   
  let byteChar=atob(base64Data);    
  let byteArray=[];   
   for(let index=0;index<byteChar.length;index+=sliceSize){    
        let slice=byteChar.slice(index,index+sliceSize);  
        let byteNumber=[];    
        for(let i=0;i<slice.length;i++){   
        byteNumber.push(slice.charCodeAt(i));    
            }     
        byteArray.push(new Uint8Array(byteNumber));  
           }    
        let result=new Blob(byteArray,{     
        type:contentType  
         })    
        result=Object.assign(result,{   
            preview:URL.createObjectURL(result),    
            name:`示例.png`  
           });
            resolve(result); 
        })
  }

调用方法：

let base64=base64.split(',')[1];
		this.base64GetBlob({base64Data:base64,contentType:'image/png'}).then(res=>{
		console.log('base64转化为blob格式:',res);
})

举例子：在网上找到一张base64格式的图片

"data:image/jpeg;base64,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";

在vscode运行代码:

export class ShowImageComponent implements OnInit {

  constructor() { }
  ngOnInit(): void {
    let base64=this.imgData.split(',')[1];
    this.base64GetBlob({base64Data:base64,contentType:'image/png'}).then(res=>{
      console.log('base64转化为blob格式:',res);
  })
  }
  imgData:any="data:image/jpeg;base64,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";
  base64GetBlob({base64Data='',contentType='',sliceSize=512}={}){
    return new Promise((resolve,reject)=>{   
     let byteChar=atob(base64Data);    
     let byteArray=[];   
      for(let index=0;index<byteChar.length;index+=sliceSize){    
           let slice=byteChar.slice(index,index+sliceSize);  
           let byteNumber=[];    
           for(let i=0;i<slice.length;i++){   
           byteNumber.push(slice.charCodeAt(i));    
               }     
           byteArray.push(new Uint8Array(byteNumber));  
              }    
           let result=new Blob(byteArray,{     
           type:contentType  
            })    
           result=Object.assign(result,{   
               preview:URL.createObjectURL(result),    
               name:`示例.png`  
              });
               resolve(result);
           })
          }
}

运行效果+控制台打印并查看blob格式数据

3.blob转换base64：

blobGetBase64(blob){ 
      return new Promise((resolve,reject)=>{   
      const fileReader=new FileReader();   
      fileReader.onload=(e)=>{     
       resolve(e.target.result);   
      };   
       fileReader.readAsDataURL(blob);   
       fileReader.onerror=()=>{     
        reject(new Error('文件流异常'));   
         }; 
       });
     }

调用方法：

this.blobGetBase64（blob）.then(res=>{
      console.log('blob转化为base64格式',res)
})

base64:适合场景是小图片，在多处需要用到该图片时可用