.net 保存base64 图片_javascript 图片（image）转换base64

项目里面有些模块会图片显示功能，一般情况下我们都是将文件以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是不支持跨域的，保存图片是不会成功的，所以最好每一次都加个随机数，以保证源都是最新的，不走缓存，这样每次刷新或更新图片就能正常显示了。

方法二:FileReader，该方法就是使用javascript的原生方法，通过FileReader的readAsDataURL方法就可将通过input上传的图片文件转成base64

    
    
    




    请选择一个文件：
    
    


    

以上两种方法可以直接将对应方法下面的代码保存成html文件，直接打开就可以使用。

原文：

javascript 图片（image）转换base64​www.dsiab.com