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

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

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 {
   </