js 图片转base64的方式(两种)

最新推荐文章于 2024-03-08 21:33:31 发布
最新推荐文章于 2024-03-08 21:33:31 发布
阅读量1.3k 收藏 2
点赞数
原文链接：https://www.jb51.net/article/138809.htm
版权

方式一：Blob和FileReader 对象

实现原理：

使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]

使用FileReader 对象接收blob

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html lang="en">

<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>js 图片转base64方式</title>

</head>

<body>

  <p id="container1"></p>

  <script>

    getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")

    function getBase64(imgUrl) {

      window.URL = window.URL || window.webkitURL;

      var xhr = new XMLHttpRequest();

      xhr.open("get", imgUrl, true);

      // 至关重要

      xhr.responseType = "blob";

      xhr.onload = function () {

        if (this.status == 200) {

          //得到一个blob对象

          var blob = this.response;

          console.log("blob", blob)

          // 至关重要

          let oFileReader = new FileReader();

          oFileReader.onloadend = function (e) {

            let base64 = e.target.result;

            console.log("方式一》》》》》》》》》", base64)

          };

          oFileReader.readAsDataURL(blob);

          //====为了在页面显示图片，可以删除====

          var img = document.createElement("img");

          img.onload = function (e) {

            window.URL.revokeObjectURL(img.src); // 清除释放

          };

          let src = window.URL.createObjectURL(blob);

          img.src = src

          document.getElementById("container1").appendChild(img);

          //====为了在页面显示图片，可以删除====

 

        }

      }

      xhr.send();

    }

  </script>

</body>

</html>

方式二：canvas.toDataURL()方法

实现原理：

使用canvas.toDataURL()方法

需要解决图片跨域问题 image.crossOrigin = '';

使用了Jquery库的$.Deferred()方法

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!DOCTYPE html>

<html lang="en">

<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>js 图片转base64方式</title>

</head>

<body>

<p id="container2"></p>

  <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

  <script>

    let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";

 

    //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小

    function getBase64Image(img, width, height) {

      var canvas = document.createElement("canvas");

      canvas.width = width ? width : img.width;

      canvas.height = height ? height : img.height;

      var ctx = canvas.getContext("2d");

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      var dataURL = canvas.toDataURL();

      return dataURL;

    }

    function getCanvasBase64(img) {

      var image = new Image();

      //至关重要

      image.crossOrigin = '';

      image.src = img;

      //至关重要

      var deferred = $.Deferred();

      if (img) {

        image.onload = function () {

          deferred.resolve(getBase64Image(image));//将base64传给done上传处理

          document.getElementById("container2").appendChild(image);

        }

        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']

      }

    }

    getCanvasBase64(imgSrc)

      .then(function (base64) {

        console.log("方式二》》》》》》》》》",base64);

      }, function (err) {

        console.log(err);

      });

  </script>

</body>

</html>

Hzsilvana
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript实现Base64编码转换
01-19
Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64，所以每6个比特为一个单元，对应某个可打印字符。三个字节有24个比特，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示。...
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
12-09
Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64，所以每6个比特为一个单元，对应某个可打印字符。三个字节有24个比特，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示。...
js将图片转base64两种方法
qq_43119912的博客
03-14 1万+
第二种：xhr + FileReader。第一种：Image + canvas。
使用JavaScript将图片转换为Base64
olderandyanger的博客
10-23 3310
将图片转成base64格式
JS将图片转Base64的两种方法
最新发布
dabaooooq的博客
03-08 778
实现原理：使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]使用FileReader 对象接收blob。
js将图片或者文件转成base64格式的两种方法
热门推荐
qq_17335549的博客
12-01 2万+
js将图片或者文件转成base64格式的两种方法
js 将图片转为base64格式
qq_36762151的博客
06-09 1954
两种方式：1. 利用canvas绘制图片：适用转换本地路径图片2. 通过网络请求图片地址，并返回blob格式，再操作：适用服务器端图片。
js将图片转换成base64
锦瑟年华L的博客
07-27 1万+
之前有个需求是把页面绘制成图片，上传到服务器中，我使用的html2canvas。但是html页面当中含有图片的话，在截图时存在跨域问题，导致截图失败。经过多方查找，发现把页面中的图片转换成base64，可以避免这个跨域问题。......
微信小程序专用的二维码组件支持base64输出和canvas绘制两种方式
08-12
微信小程序专用的二维码组件，支持base64输出和canvas绘制两种方式
【前端笔记】js将图片文件转换为base64字符串
bg的博客
04-27 1136
js将图片文件转换为base64字符串。
JS获取图片或base64的宽高等基本信息
weixin_34403976的博客
08-18 2621
JS获取图片或base64的宽高等基本信息 let newImage = new Image() // 这里将src传入需要获取信息的图片地址或base64 newImage.src = base64 // onload是异步的,封装的话可以用promise newImage.onload = () => { // 输出图片信息 比如可以获取图片宽高 console.log(newImage) console.log(newImage.width) console.log(n
js如何将图片转为base64
百变鹏仔工作室
01-25 668
参数替换为实际的图片元素，以便在你的项目中使用。此外，还可以根据需要调整图像的类型和质量参数。编码会增加一些性能开销，因此仅在需要时使用此方法，并确保在处理大量图片时考虑性能因素。元素，并设置其宽度和高度与要转换的图片相同。（也可以根据需要选择其他图像类型），质量参数为。在 JavaScript 中，你可以使用。数据传递给调用方，以便进一步处理或使用。在上述示例中，首先创建了一个。，并指定图像的类型为。最后，通过回调函数将。请注意，将图片转换为。
js将图片url转化为base64
二七二十七的博客
12-19 2541
前端js将图片url转化为base64
js将图片文件转为base64格式
YanHSama的博客
11-10 954
重要提示：FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限。元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象，还可以是来自在一个。对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用。对象指定要读取的文件或数据。
js将图片转为base64（解决Canvas.toDataURL 图片跨域问题）
qq_37899792的博客
10-17 1万+
场景一：将项目中的图片资源转为base64 function convertImgToBase64(url, callback) { let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); im...
js如何将图片转成BASE64编码，网页跟uniapp开发的app的区别?
Allen-Ye博客
08-02 380
js如何将图片转成BASE64编码，网页跟app的区别?
js图片链接转base64
08-31
- *1* *2* *3* [js将图片或者文件转成base64格式的两种方法](https://blog.csdn.net/qq_17335549/article/details/128134996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值