fileReader图片转base64格式

最新推荐文章于 2023-09-05 10:26:02 发布

m0_67805754

最新推荐文章于 2023-09-05 10:26:02 发布

阅读量400

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_67805754/article/details/129915518

版权

该文章介绍了如何利用JavaScript的FileReader对象和Canvas来将用户选取的图片转换成Base64编码。通过创建FileReader实例读取图片文件，然后在load事件中设置Image对象的src为base64字符串，实现图片的显示。

摘要由CSDN通过智能技术生成

<!-- 将图片转换为base64需要使用JavaScript中的FileReader对象和Canvas对象。 具体代码如下：
    1. HTML代码:需要一个input标签用于选择图片。 -->
    <input type="file" accept="image/*" onchange="imageToBase64(this)">
    <br>
    <img id="img">
    <script>
    // 2. JavaScript代码:定义一个函数imageToBase64,其中使用FileReader对象读取选中的图片
    function imageToBase64(input) {
        // 获取输入的图片文件
        let file = input.files[0]
        // 创建FileReader实例对象reader
        let reader = new FileReader();
        // 读取图片文件
        reader.readAsDataURL(file);
        console.log(reader,'reader');
        // 当图片加载完成时触发load事件
        reader.onload = function () {
            // 创建一个Image对象
            let img = document.querySelector('#img')
            // 设置Image对象的src为读取文件得到的base64字符串
            img.src = reader.result;
        }
    }
     /* 3. 代码功能分析
     首先,在HTML中定义一个input标签,并在其onchange事件中调用函数imageToBase64。
     函数imageToBase64中,首先获取input中选择的图片文件。
     然后创建FileReader对象,使用它的readAsDataURL方法读取图片文件,得到以base64编码的字符串。
     接着创建一个Image对象,设置它的src为读取文件得到的base64字符串。 */
   
    </script>