js如何将图片转成BASE64编码，网页跟uniapp开发的app的区别?

Base64是一种用64个字符来表示任意二进制数据的方法，这篇文章主要为大家介绍了如何实现将图片转为base64格式，感兴趣的小伙伴可以学习一下

前言

前段时间在写我的VUE全栈项目的时候，遇到要把前端的照片上传到后端，再由后端存到数据库的问题，通过网上查找资料，看了一些其他写者的解决方法，最终采用转BASE64的方法。本人觉得把上传的图片转为BASE64格式相比其他是比较简单的。

什么是BASE64

Base64是一种用64个字符来表示任意二进制数据的方法。它是一种编码方式，而非加密方式，即可以将一张图片数据编码成一串字符串，使用该字符串代替图像地址。

BASE64的优缺点

• 减少一张图片的http请求
• 导致转换后的css文件体积增大，而CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕，而且转换后的数据是一大串字符串。

注意：：图片转BASE64格式的适合小图片或者极简单图片，大图片不划算。它的格式为：data:image/type;base64,xxxx…

虽然说这种方式不适用于体积大的图片，但不得不说有时候还挺方便的。由于在我的vue项目中上传的图片都比较小，单一，为了方便我采用了这种方式来实现将前端上传的图片存到数据库中。

在h5或者网页中

 // 图片路径var img = "imgurl";function getBase64Image(img) {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();var dataURL = canvas.toDataURL("image/"+ext);return dataURL;}var image = new Image();image.src = img;console.log(getBase64Image(image));

在uniapp中，如果是app情况下，不支持原生的canvas跟image

 // 图片路径var img = "imgurl";
const path = plus.io.convertLocalFileSystemURL(img); //绝对路径const fileReader = new plus.io.FileReader();fileReader.readAsDataURL(path);fileReader.onloadend = (res) => {//读取文件成功完成的回调函数let base64 = res.target.result;console.log('res', res);};