前端如何将本地图片or网络图片转化为base64格式

我们项目中会遇到需要将图片转化为base64格式的情况，有时候是本地图片，有时候是网络图片，那么具体分别该怎么操作呢？

1、本地图片

我这里用的是h5的FileReader API。根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

    const imageToBase64 = (file:any) => {//将本地图片转为base64格式                  const files = file                  let reader = new FileReader()                  reader.readAsDataURL(files)                  reader.onload = () => {                        // console.log(reader.result,"图片转base64")                        state.base64Url = reader.result                  }                  reader.onerror = (error) => {                        console.log(error,"error")                  }            }

这里的形参file就是本地文件，我这里是一张图片,参数类型是一个对象。如下图所示

我觉得这里要注意的点是，一定要保证你传的参数是这个文件，而不仅仅是这个文件的id，路径之类的。

2、网络图片

网络图片采用的是canvas绘制的

        const imageToBase64 = (fileName:any) => {//将网络图片转为base64格式                      let image = new Image();                      let dataURL:string = ''                      //解决跨域问题                      image.setAttribute('crossOrigin', 'anonymous');                                  let imageUrl = fileName                      image.src = imageUrl                         image.onload = () => {                            var canvas = document.createElement("canvas");                            canvas.width = image.width;                            canvas.height = image.height;                            var context = canvas.getContext('2d');                            if(context){                                  context.drawImage(image, 0, 0, image.width, image.height);                            }                                            var quality = 0.8;                            //这里的dataurl就是base64类型                            dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！                            console.log(dataURL,"dddddddddddddd")                            return dataURL                      }                }

这里要注意的点是，形参fileName必须是能够下载到这个网络图片的路径，也就是你打开这个路径就能下载到这个文件到本地。

第一次写文章，写的不好请大家多多指教！文章是我总结网上的一些方法和自己的写法结合起来的！