javascript 图片转base64（免费源码）

最新推荐文章于 2023-05-31 12:00:30 发布

桃花朵朵开3

最新推荐文章于 2023-05-31 12:00:30 发布

阅读量341

点赞数

分类专栏：小白文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_48445738/article/details/109132245

版权

小白专栏收录该内容

57 篇文章 0 订阅

订阅专栏

图片转base64

前几天我看微信小程序不能上传本地图片了只能用网络链接和base64位的链接
网上虽然有很多免费转换的网站但私密照片上传网上感觉还是不妥
于是用javascript写了一个图片转64位的小demo 各位可以直接拿去使用
话不多说直接上源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img转换器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        h1 {
            margin-top: 100px;
            text-align: center;
        }
        
        .bigbox {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid;
            font-size: 50px;
            color: #333;
            text-align: center;
            line-height: 500px;
        }
        
        #text {
            width: 500px;
            height: 100px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <h1>IMG转64位</h1>
    <div style="position: relative;">
        <div class="bigbox">
            +
        </div>
        <textarea name="" id="text" cols="30" rows="10"></textarea>
    </div>
    <script>
        var text = document.getElementById('text')
        document.ondragover = function(e) {
            e.preventDefault() //取消默认不能进入drag的问题
        }
        document.ondrop = function(e) {
            e.preventDefault() //取消打开默认事件
        }
        var div = document.querySelector('.bigbox')
        div.ondragover = function(e) {
            e.preventDefault() //取消默认不能进入drag的问题
        }
        div.ondrop = function(e) {
            e.preventDefault()
            var file1 = new FileReader()
            for (var i = 0; i < e.dataTransfer.files.length; i++) {
                file1.readAsDataURL(e.dataTransfer.files[i])
                file1.onload = function() {
                    console.log(file1.result)
                    text.innerText = file1.result
                }
            }

            // console.log(e.dataTransfer)
        }
    </script>
</body>

</html>

在这里插入图片描述

说明一次只能拖一张只能转图片没做错误处理

桃花朵朵开3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 图片转base64（免费源码）

图片转base64前几天我看微信小程序不能上传本地图片了只能用网络链接和base64位的链接网上虽然有很多免费转换的网站但私密照片上传网上感觉还是不妥于是用javascript写了一个图片转64位的小demo 各位可以直接拿去使用话不多说直接上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor
复制链接

扫一扫