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