js把本地图片转成base64



<!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>

遇到的问题1： Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported

解决办法：增加属性 img.setAttribute(“crossOrigin”,’Anonymous’)

跨域问题2：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

解决办法：VSCode安装Live Server插件，这个插件功能十分强大，不止可以解决ajax不支持file协议的问题，还可以实现在编辑器里保存修改后，页面自动刷新的功能。具体使用方法在插件安装的地方有说明，用起来也十分简单。
安装完成之后，打开html文件后，点击右下角的GoLive 即可。

问题三：在vue里面总是进去onerror。

解决办法：大概率是图片的路径没有找到的原因。如果项目使用了webpack，图片的资源路径就会变化。可以试试

let imgpath = "static/xxx.png"
或者自己放的目录下面 “/images/xxx.png”。

再或者就是是不是浏览器的缓存问题加上一个时间戳。

个人博客地址：http://lijian.store/ 欢迎大家交流学习

js把本地图片转成base64

猜你喜欢