获取文件输入框中的图片，并用canvas转成base64位格式

最新推荐文章于 2021-08-14 18:16:05 发布

LiZz-_-

最新推荐文章于 2021-08-14 18:16:05 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：表单图片

本文链接：https://blog.youkuaiyun.com/weixin_39491261/article/details/79275092

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript将用户上传的图片转换为Base64编码的方法。通过前端技术实现图片的即时预览与格式转换，便于在网络应用中传输与展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：需要以服务器模式打开此文件

直接上代码：
CSS:

#canvas{
            display: none;
        }

HTML：

<input type="file" accept="image/*" id='file'>
    <canvas id='canvas'></canvas>
    <img src="" id='target-img'>

javascript:

let canvas = document.getElementById("canvas"),
    targetImg = document.getElementById('target-img'),
    file = document.getElementById('file'),
    context = canvas.getContext('2d')

    file.onchange = function () {
        let URL = window.URL || window.webkitURL,
        dataURL = URL.createObjectURL(this.files[0])    // 创建URL对象
        let img = new Image()
        img.crossOrigin = "anonymous"   // 只有服务器模式打开， 才有效
        img.onload = function () {
            URL.revo.revokeObjectURL(this.src)  //  img加载完成后,主动释放URL对象
            canvas.width = img.width
            canvas.height = img.height
            context.drawImage(img, 0, 0 , img.width,  img.height)
            let dataUrl = canvas.toDataURL('img/png')
            targetImg.src = dataUrl
        }

        img.src = dataURL
    }