如何把图片的地址转换为base64

最新推荐文章于 2024-05-31 09:05:13 发布

笨钟

最新推荐文章于 2024-05-31 09:05:13 发布

阅读量6.1k

点赞数

分类专栏： canvas绘图文章标签： base64 图片

本文链接：https://blog.csdn.net/A_bet_of_three_years/article/details/78740778

版权

canvas绘图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.利用canvas.toDataURL去转换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<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"); 

       // 利用img.onload是解决不了这个问题的，必须是在运行服务器的情况下，还有是本地的图片
       // 注意浏览器上的地址栏是localhost:8080这一类的地址
      /*img.onload = function(){
        ctx.drawImage(img, 0, 0, img.width, img.height);
      }*/

      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 = 'e824b899a9014c08e68d91d6007b02087bf4f40b.jpg';
      img.onload =function() {
        var data = getBase64Image(img);
        img.src=data;
        console.log(data);
      }

      document.body.appendChild(img);
    }

    main()

  </script>
</body>
</html>