js获取图片base64编码

最新推荐文章于 2023-06-09 16:46:28 发布

空中红绿灯

最新推荐文章于 2023-06-09 16:46:28 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39015306/article/details/105550033

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一:canvas

<script type="text/javascript">
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var dataURL = canvas.toDataURL("image/png");
        return dataURL
    }


    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.onload=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>

案例：


HTML页面

<div class="layui-upload-list" style="float: left;">
     <img class="layui-upload-img" id="test-upload-normal-img-bannerImg03"/>
     <p id="test-upload-demoText3" style="margin: -38px 0 0 215px"></p>
</div>
<input type="file" name="bannerImg03" id="bannerImg03" onchange="show(this,this.id)" style="margin: 172px 0 0 10px;">

js

function show(element,id) {
　　var rd = new FileReader();//创建文件读取对象
　　var files = element.files[0];//获取file组件中的文件
　　rd.readAsDataURL(files);//文件读取装换为base64类型
　　rd.onloadend = function (e) {
    　　//加载完毕之后获取结果赋值给img
    　　document.getElementById("test-upload-normal-img-"+id).src =this.result;
    　　document.getElementById("test-upload-normal-img-"+id).style.width = 200+"px";
    　　document.getElementById("test-upload-normal-img-"+id).style.height = 200+"px";
　　}
 }}

if (document.getElementById("iconImg").files[0] == undefined) {
          layer.msg('商品缩略图');
          return false;
   } else {

         document.getElementById("test-upload-normal-img-iconImg").src.toString()
   }
 
 base编码比较长 后台用StringBuilder 接受 @RequestParam(value = "iconImg") StringBuilder iconImg