javascript 图片（image）转换base64

作者: 图恩分类: 开发笔记阅读: 4038字数: 3040发布时间： 2020-11-25 18:27:49

项目里面有些模块会有图片显示功能，一般情况下我们都是将文件以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>
<head>
  <meta charset="utf-8">
  <title>通过filereader接口读取文件</title>
  <script type="text/javascript">
    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 dataURL = canvas.toDataURL("image/png");
        return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
    }

    function main() {
        var img = document.createElement('img');
        img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3922290090,3177876335&fm=26&gp=0.jpg?v=' + Math.random();  //此处自己替换本地图片的地址
        img.crossOrigin= 'anonymous'
        img.onload =function() {
          debugger
            var data = getBase64Image(img);
            var img1 = document.createElement('img');
            img1.src = data;
            document.body.appendChild(img1);
            console.log(data);
        }
    }
    main()
</script>
</head>

<body>
</body>

</html>

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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>通过filereader接口读取文件</title>
    <script type="text/javascript">
        function readAsDataURL()
        {
            if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
            {
                result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
                return false;
            }
            var file=document.getElementById("imagefile").files[0];
            if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
            {
                alert("请确保文件为图像文件");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e)
            {
                var result=document.getElementById("result");
                result.innerHTML='<img src="'+this.result+'" alt=""/>'
            }

        }
    </script>
</head>

<body>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
    <!-- 这里用来显示图片结果-->
</div>
</body>
</html>

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

本文章由javascript技术分享原创和收集

javascript 图片（image）转换base64

发表评论 (审核通过后显示评论)：

文章评论(0)