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

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

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

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

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

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

createURL(blob){ let img=document.createElement('img'); img.onload=function(e){//img的onload事件销毁URLwindow.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转化成base64urlGetBase64(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:适合场景是小图片，在多处需要用到该图片时可用

图片获取、格式转换与后台存储相关推荐

docx文档怎么排列图片_格式转换太麻烦？仅需一行命令，搞定图片、音频、视频、文本批量转换！...
每天12:18准时给大家惊喜! 大家好!我是好奇仔,热衷于搜罗和分享各种好用.实用的软件神器和资源,有手机软件.办公软件.APP,还有网站资源-- 来自:芒种学院(ID:lazy_info) 作者: ...
Python3 Image图片webp格式转换，URL Image Byte字节流操作
前言首先图片格式转换的方法有很多,但是转图片字节流的,我搜了一下午终于在 stackoverflow上搜到了说一下为什么要在线转这个图片格式图片不需要下载到本地,爬取到图片url后,读取图片字节 ...
FFmpeg 使用命令整理 – 提取音频或视频、提取图片、格式转换等
提取声音的软件网上搜索有不少,不过最有名最专业的似乎是一个命令行工具:ffmpeg.这个工具功能十分丰富且强大,我所需要的从视频中提取 mp3 的功能只是其中包含的一个.感觉使用起来很复杂因为是命令行 ...
【FFmpeg 命令】提取音频或视频、提取图片、格式转换等
文章目录 1. FFmpeg 简介 2. 组件组成 3. 命令参数 3.1 主要参数 3.2 影像参数 4. 实战使用 4.1 格式转换 (将file.avi 转换成output.flv) 4.2 合 ...
图片怎么格式转换成jpg？介绍几种思路
在现代数字世界中,图片格式转换是一项非常重要的技能.不同的图片格式适合不同的用途,例如PNG格式适合用于图像透明处理,而JPG格式则适合用于图像压缩和共享.本文将介绍如何将不同格式的图片转换为JPG, ...
用python实现批量图片的格式转换
最近在处理数据集的时候参考了别人的代码,用python对图片的格式进行了转换,代码如下: import os from PIL import Image oldpath ='D:\BaiduNetdi ...
python opencv图片读入格式转换
opencv中提供了图片格式转换的方法,主要是采用cv2.cvtColor函数. 方法如下: import cv2output1=cv2.imread('D:/super_reslution/SRCN ...
python工具包读取图片及格式转换
关于python怎么读取文件,一直没搞清楚,最近使用tensorboard,搞明白了 1导包和设置图片位置 from PIL import Image from torch.utils.tensorb ...
python图片压缩/格式转换
前言昨晚终于把红底换成蓝底了,刚想着兴高采烈地去提交,结果发现201KB交不了- 学院要求(60KB~200KB), 我人傻了,看了一下wps, 啊充钱才可以. 压缩图片 # 代码参考自 https ...

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

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

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

图片获取、格式转换与后台存储相关推荐

最新文章

热门文章