图片转base64方法总结

最新推荐文章于 2024-07-10 03:10:36 发布

东都花神

最新推荐文章于 2024-07-10 03:10:36 发布

阅读量5.5k

点赞数 1

分类专栏： js node

本文链接：https://blog.csdn.net/qq_33988065/article/details/81700199

版权

js 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

将图片转为base64格式是一种比较常见的需求，今天就总结一下在浏览器中和服务器上比较常用的几种方法。

通过canvas将图片转base64

<!DOCTYPE html>
<html lang='zh'>
<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
  <meta http-equiv='X-UA-Compatible' content='ie=edge' />
  <title>通过canvas将图片转base64</title>
</head>
<body>
  <img src=""/>
  <script type='text/javascript'>
    /**
     * @desc 图片转base64
     * @args {String} imgUrl 图片地址
     * @args {Number} quality 图片质量
     */
    function getBase64Image(imgUrl, quality = 0.5) {
      var img = new Image();
      img.src = imgUrl
      return new Promise(resolve => {
        img.onload = function() {
          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);
          dataURL = canvas.toDataURL('image/jpeg', quality);
          resolve(dataURL)
        }
      })
    }
    // 仅支持本地图片
    getBase64Image("./pic.png", 0.8).then(function(base64) {
      console.log(base64)
      document.querySelector('img').src = base64
    })
  </script>
</body>
</html>

通过html2canvas将页面转化为图片（推荐）

<!DOCTYPE html>
<html lang='zh'>
<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
  <meta http-equiv='X-UA-Compatible' content='ie=edge' />
  <title>通过html2canvas将页面转化为图片</title>
</head>
<body> 
  <!--本地线上都行，线上需要设置CROS-->
  <img src='https://wx.qlogo.cn/mmopen/vi_32/UQoHn9hFNXbeJD1EdLAdBhWfFcIBKViajWOicl2uticOVNs1FKdO5d80QLVjPCnL3LY53gs0EbmIFl5zDgLI7oGTw/132'/>
  <script src="https://daoket.gitee.io/ai/js/html2canvas.min.js"></script>
  <script type='text/javascript'>
    html2canvas(document.querySelector('img'), {useCORS: true}).then(function(canvas) {
      var base64 = canvas.toDataURL("image/jpeg", 0.1);
      document.body.appendChild(canvas);
      console.log(base64)

//    downloadImg(base64, "meme.png")
    });

    // 下载图片
    function downloadImg(base64, imgName) {
      var a = document.createElement("a");
      a.href = base64;
      a.download = imgName;
      a.click();
    }
  </script>
</body>
</html>

通过node的fs.readFile转换

const fs = require('fs');

fs.readFile('./a.png', 'base64', (err, data) => {
  // 图片需要在data前加上 'data:image/png;base64,'
  console.log(data)
});

通过node的fs.createReadStream转换

var fs = require('fs');
var readStream = fs.createReadStream('./pic.png');

readStream.on('data', function (chunk) {
  console.log(chunk.toString('base64')) 
});

通过Buffer转化

let base64 = Buffer.from('把我转化为base64').toString('base64')
console.log(base64)

东都花神

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
图片转base64方法总结

将图片转为base64格式是一种比较常见的需求，今天就总结一下在浏览器中和服务器上比较常用的几种方法。通过canvas将图片转base64&lt;!DOCTYPE html&gt;&lt;html lang='zh'&gt;&lt;head&gt; &lt;meta charset='UTF-8' /&gt; &lt;meta name='viewport' content='...
复制链接

扫一扫

专栏目录