js把本地图片转成base64

最新推荐文章于 2024-08-13 19:40:00 发布

北岭有燕

最新推荐文章于 2024-08-13 19:40:00 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_41160739/article/details/119449911

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏



<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">

    </style>
</head>

<body>
    <img alt="" id="box">

    <script type="text/javascript">
        var imglizi = document.getElementById("box")

        var img = new Image();
        img.onload =()=> {
            console.log("已经进去onload")
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            img.setAttribute("crossOrigin", 'Anonymous')
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
            var base64 = canvas.toDataURL("image/" + ext);
            console.log(base64);
            if(base64.length>10000){
                //此处有一个bug，会执行两次onload事件，第一次执行加载的图片是不对的，所以需要使用第二次的图片
                imglizi.src = base64
            }
        }
        img.onerror=(error)=>{
            console.log("error",error)
        }
        img.src = "./bomb.png?v="+Math.random(); //修改的地方 imgurl 就是你的图片路径，加上随机数是解决可能存在缓存问题 
    </script>
</body>

</html>