img 转为base64

最新推荐文章于 2024-06-21 15:25:50 发布

weixin_34100227

最新推荐文章于 2024-06-21 15:25:50 发布

阅读量397

点赞数

原文链接：https://my.oschina.net/u/2306318/blog/1616647

版权

2019独角兽企业重金招聘Python工程师标准>>>

方法一:canvas

    function main() {
        var img = document.createElement('img');
        img.src = './images/Game of Thrones.jpg'; //此处自己替换本地图片的地址
        img.onload =function() {
            var data = getBase64Image(img);
            var img1 = document.createElement('img');
            img1.src = data;
            document.body.appendChild(img1);
            console.log(data);
        }
    }
    main()

</script>

方法二:FileReader

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>通过filereader接口读取文件</title>
    <script type="text/javascript">
        function readAsDataURL()
        {
            if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
            {
                result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
                return false;
            }
            var file=document.getElementById("imagefile").files[0];
            if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
            {
                alert("请确保文件为图像文件");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.οnlοad=function(e)
            {
                var result=document.getElementById("result");
                result.innerHTML='<img src="'+this.result+'" alt=""/>'
            }

}
</script>
</head>

<body>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
    
</div>
</body>
</html>

参考文献： https://www.cnblogs.com/tugenhua0707/p/4666076.html

转载于:https://my.oschina.net/u/2306318/blog/1616647