img 转为base64(转)

方法一: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
         // return dataURL.replace("data:image/png;base64,", "");
     }

     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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券