项目里面有些模块会有图片显示功能，一般情况下我们都是将文件以jpg/png格式上传到项目中，再在代码中把img的src属性改成图片的路径就能正常显示，但是某些情况下不需要以文件形式存放图片文件，需要将图片以字符串格式保存到数据库中要怎么办呢？
这时候可以考虑将图片转成base64字符串格式，这样就可以很方便保存跟引用了，当然文件大小尽量控制小一些，不然转成base64后长度会很长，下面介绍两种常规将图片转成base64的方法，可以定制成自己的小工具：
方法一: canvas，该方法就是通过javascript中的canvas属性将图片转成base64，主要用到了canvas中的toDataUrl方法，该方法可以将canvas转成base64，所以关键点就是先获取图片的宽高，再将图片放入canvas中，再使用toDataUrl就可以转成base64了。如果在本地引用网络图片可能会出现报错：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 因为此时会产生跨域，我们在使用canvas.toDataURL时，如果DOM内存在图片资源，该资源所在的web-server是不支持跨域的，保存图片是不会成功的，所以最好每一次都加个随机数，以保证源都是最新的，不走缓存，这样每次刷新或更新图片就能正常显示了。
<html>\n<head>\n <meta charset="utf-8">\n <title>通过filereader接口读取文件</title>\n <script type="text/javascript">\n function getBase64Image(img) {\n var canvas = document.createElement("canvas");\n canvas.width = img.width;\n canvas.height = img.height;\n var ctx = canvas.getContext("2d");\n ctx.drawImage(img, 0, 0, img.width, img.height);\n var dataURL = canvas.toDataURL("image/png");\n return dataURL\n // return dataURL.replace("data:image/png;base64,", "");\n }\n\n function main() {\n var img = document.createElement('img');\n img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg?v=' + Math.random(); //此处自己替换本地图片的地址\n img.crossOrigin= 'anonymous'\n img.onload =function() {\n debugger\n var data = getBase64Image(img);\n var img1 = document.createElement('img');\n img1.src = data;\n document.body.appendChild(img1);\n console.log(data);\n }\n }\n main()\n</script>\n</head>\n\n<body>\n</body>\n\n</html>\n方法二:FileReader，该方法就是使用javascript的原生方法，通过FileReader的readAsDataURL方法就可将通过input上传的图片文件转成base64
<html>\n<head>\n <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />\n <title>通过filereader接口读取文件</title>\n <script type="text/javascript">\n function readAsDataURL()\n {\n if(typeof FileReader=='undifined') //判断浏览器是否支持filereader\n {\n result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";\n return false;\n }\n var file=document.getElementById("imagefile").files[0];\n if(!/image\\/\\w+/.test(file.type)) //判断获取的是否为图片文件\n {\n alert("请确保文件为图像文件");\n return false;\n }\n var reader=new FileReader();\n reader.readAsDataURL(file);\n reader.onload=function(e)\n {\n var result=document.getElementById("result");\n result.innerHTML='<img src="'+this.result+'" alt=""/>'\n }\n\n }\n </script>\n</head>\n\n<body>\n<p>\n <label>请选择一个文件：</label>\n <input type="file" id="imagefile" />\n <input type="button" value="读取图像" onClick="readAsDataURL();" />\n</p>\n<div name="result" id="result">\n <!-- 这里用来显示图片结果-->\n</div>\n</body>\n</html>\n以上两种方法可以直接将对应方法下面的代码保存成html文件，直接打开就可以使用。