前端base64与图片相互转换(附代码)

更新时间：2023年09月13日 09:43:27 作者：MoXinXueWEB

有时候会遇到要把前端发送过来的图片的文件base64编码转化成图片,所以下面这篇文章主要给大家介绍了关于前端base64与图片相互转换的相关资料,需要的朋友可以参考下

base64转图片

如下图：（后端返回的数据）

<img :src="baseImg" >
let baseImg = ""
this.baseImg ="data:image/png;base64," + data?.flowChar

base64转换图片文件

base64ImgtoFile = (dataurl, filename = 'file') => {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}，
// base64编码的图片
baseImg = 'data:image/png;base64,R0lGODlhqASoAfcAAAAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMrADMrMzMrZjMrmTMrzDMr/zNVADNVMzNVZjNVmTNVzDNV/zOAADOAMzOAZjOAmTOAzDOA/zOqADOqMzOqZjOqmTOqzDOq/zPVADPVMzPVZjPVmTPVzDPV/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YrAGYrM2YrZmYrmWYrzGYr/2ZVAGZVM2ZVZmZVmWZVzGZV/2aAAGaAM2aAZmaAmWaAzGaA/2aqAGaqM2aqZmaqmWaqzGaq/2bVAGbVM2bVZmbVmWbVzGbV/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5krAJkrM5krZpkrmZkrzJkr/5lVAJlVM5lVZplVmZlVzJlV/5mAAJmAM5mAZpmAmZmAzJmA/5mqAJmqM5mqZpmqmZmqzJmq/5nVAJnVM5nVZpnVmZnVzJnV/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wrAMwrM8wrZswrmcwrzMwr/8xVAMxVM8xVZsxVmcxVzMxV/8yAAMyAM8yAZsyAmcyAzMyA/8yqAMyqM8yqZsyqmcyqzMyq/8zVAMzVM8zVZszVmczVzMzV/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8rAP8rM/8rZv8rmf8rzP8r//9VAP9VM/9VZv9Vmf9VzP9V//+AAP+AM/+AZv+Amf+AzP+A//+qAP+qM/+qZv+qmf+qzP+q///VAP/VM//VZv/Vmf/VzP/VAP//M///Zv//mf//zP///wAAAAAAAAAAAAAAACH5BAEAAPwALAAAAACoBKgBAAitAPcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNIa97MubPnz6BDix5NurTp06hTq17NurXr17Bjy55Nu7bt27hz697Nu7fv38CDCx9OvLjx48iTK1/OvLnz59CjS59Ovbr169izOGvfzr279+/gw4sfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCaoNeCCDDbo4IMQRijhhBRWaOGFGGao4YYcdujhhyCGKOKIJJZo4okopqjiiiy26OKLMMYo44w0LdZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWClmqeWWXHbp5ZdghinmmGSWaeaZaKap5ppstunmm3DGKeecdNZp55145iep55589unnn4AGKuighBZq6KGIJqrooow26uijkEYq6aSUVmrppZgjZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLQg1mrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNusg7LPQRivttNRWa+212Gar7bbcduvtt+CGK+645JZr7rke6Kar7rrstuvuu/DGK++89NZr77345qvvvvz26++/HAAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2wc8cUYZ6zxxhx37PHHIIcs8sgkl2zyySinrPLKLBq37PLLMMcs88w012zzzTjnrPPOPPfs889ABxkt9NBEF2300UgnrfTSTDft9NNQRy311FRXGW311VhnrfXWXHft9ddghy322GSXbfbZaKcYrfbabLft9ttwxy333HTXbffdeOet9958Fvft99+ABy744IQXbvjhiCeu+OKMN+4X+OOQRy755JRXbvnlmGeu+eacd+7556AWhy766KSXbvrpqKeu+uqst+7667DHLhb77LTXbvvtuOeu++689+7778AHL/zwFMQXb/zxyCev/PLMN+/889BHL/30FNRXb/312Gev/fbcd+/99+CHL/74FOSXb/756Kev/vrst+/++/DHL//8FPTXb//9+Oev//789+///wAMoAAHFUjAAhrwgAhMoAIXyMAGOvCBEIygBBQnSMEKWvCCGMygBjfIwQ568IMgDBWhCEdIwhKa8IQoTKEKV8jCFrrwhTATjKEMZ0jDGtrwhjjMoQ53yMMe+hXwh0AMohCHSMQiGvGISEyiEpfIxCYTOvGJUIyiFKdIxSpa8YpYzKIWtxLIxS568YtgDKMYx0jGMprxjGgTTKMa18jGNrrxjXCMoxznSMc62hLxjnjMox73yMc++vGPgAykIAcSSchCGvKQiEykIhfJyEY68pGQEoykJCdJyUpa8pKYzKQmN8nJThJ68pOgDKUoR0nKUprylKhMpSoSV8nKVrrylbCMpSxnScta2vKWELjMpS53ycte+vKXwAymMIcSScxiGvOYyEymMpfJzGY685nQEIymNKdJzWpa85rYzKY2t8kRzW5685vgDKc4x0nOcprznOgJTKc618lOQQYEADs=';
//转换图片文件
const imgFile = base64ImgtoFile(baseImg); 
console.log("imgFile",imgFile);

图片(url)转换base64

getBase64 = (url, callback) => {
  let Img = new Image(),
    dataURL = '';
  Img.src = url + '?v=' + Math.random();
  Img.setAttribute('crossOrigin', 'Anonymous');
  Img.onload = function() {
    let canvas = document.createElement('canvas'),
      width = Img.width,
      height = Img.height;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
    dataURL = canvas.toDataURL('image/jpeg', 1); //可选取多种模式
    return callback ? callback(dataURL) : null; //回掉函数获取Base64编码
  };
}
// 调用
let imgUrl=‘https://www.baidu.com/img/bd_logo1.png'
 this.getBase64(imgUrl, dataURL => {
 console.log(dataURL:就是base64了)
});

便捷的图片转化base64

利用 Chrome 浏览器，在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，如下图所示，点击图片，右侧就会显示该图片的 base64 编码

总结

到此这篇关于前端base64与图片相互转换的文章就介绍到这了,更多相关base64与图片相互转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序页面缩放式侧滑效果的实现代码
这篇文章主要介绍了微信小程序页面缩放式侧滑效果的实现代码，实现原理就是通过点击按钮，往需要动画的div中添加或移除拥有动画效果的class。具体实例代码大家跟随小编一起通过本文学习吧
2018-11-11
JavaScript实现打开链接页面的方式汇总
这篇文章主要介绍了JavaScript实现打开链接页面的方式，非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JavaScript跳出循环的三种方法(break, return, continue)
这篇文章主要介绍了JavaScript跳出循环的三种方法(break, return, continue)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
JavaScript获取当前时间戳5种方法汇总
很多时候我们都把时间戳作为id值,下面这篇文章主要给大家介绍了关于JavaScript获取当前时间戳的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
js数组循环遍历数组内所有元素的方法
在js中数组遍历最简单的办法就是使用for然后再利用arr.length长度作为for最大限度值即可解决了，下面我们来看看一些有用的实例
2014-01-01
Javascript 文件夹选择框的两种解决方案
javascript文件夹选择框的两种解决方案怎么都有缺陷啊。不过更倾向于第一种
2009-07-07
Javascript isArray 数组类型检测函数
在日常开发中，我们经常需要判断某个对象是否是数组类型的，在js中检测对象类型的常见的方法有几种.
2009-10-10
js 转义字符及URI编码详解
本文主要介绍了转义字符及URI编码的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
收集前端面试题之url、href、src
本文给大家分享小编日常收集整理的关于前端面试题之url、href、src的语法规则及基本概念，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-03-03
使用原生JS实现移动端购物车效果案例
原生JavaScript作为前端开发的基石,在构建交互式网页应用中扮演着至关重要的角色,下面这篇文章主要介绍了使用原生JS实现移动端购物车效果案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-02-02