• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

将图片转成base64 小工具

admin

11月 28, 2021

工作需要使用,所以就做了一个小工具,方便使用

推荐使用 chrome,ff 。 毕竟是个小工具方便自己使用而已,所以没有做浏览器兼容测试了!

代码如下,直接保存为 .html 打开即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ImgToBase64</title>
<style>
body{margin:0px; background-color:#FFF}
</style>
</head>

<body>
<canvas id="can" style="top:0px; left: 0px;"  width="100" height="100"></canvas>
<textarea id="code" style="600px; height:200px;"></textarea>
<input id="uImg" type="file" name="file" accept="image/*" style="left:0px; top:0px;300px; height:100px;opacity:1;">
</body>
<script>
var img,canvas,c2d
inIt()
function inIt()
{
    canvas = document.getElementById("can");
    if (canvas == null){alert("请使用支持'HTML5 CANVAS'的浏览器!");return;}
    c2d = canvas.getContext("2d");
    //
    document.getElementById("uImg").addEventListener("change",function(e)
    {
        var files = e.target.files, file;
        if (files && files.length > 0) 
        {
            // 获取目前上传的文件
            file = files[0];
            // 来在控制台看看到底这个对象是什么
            console.log(file);
            // 那么我们可以做一下诸如文件大小校验的动作
            if(file.size > 1024 * 1024 * 2) 
            {
                alert('图片大小不能超过 2MB!');
                return false;
            }        
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(file);        
            //
            coding(imgURL)
        }
    });
}
function coding(_str)
{
    if(!img){img=new Image()}
    img.onload = function () 
    {
        if(img.width==0){c2d.clearRect(0,0,imgW.width,imgH.height);}
        canvas.width=img.width
        canvas.height=img.height        
        c2d.drawImage(img, 0,0, img.width, img.height);    
        //
        var _base64=canvas.toDataURL("image/png");
        console.log(_base64.length)
        if(_base64.length>100000)
        {
            document.getElementById("code").innerHTML="图片数据较大,避免电脑卡死已自动隐藏字符串"
        }
        else
        {
            document.getElementById("code").innerHTML=_base64
        }
    }
    img.src=_str
}
</script>
</html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注