当前位置:网站首页>JS image to Base64

JS image to Base64

2022-07-07 14:28:00 Snail games

This article mainly introduces js Picture turn base64 The way , Now share with you , Also give you a reference .

Mode one :Blob and FileReader object

Realization principle :

Use xhr Ask for pictures , And set the returned file type as Blob object [xhr.responseType = "blob"]

Use FileReader Object reception 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>

<htmllang="en">

<head>

  <metacharset="UTF-8">

  <metaname="viewport"content="width=device-width, initial-scale=1.0">

  <metahttp-equiv="X-UA-Compatible"content="ie=edge">

  <title>js Picture turn base64 The way </title>

</head>

<body>

  <pid="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);

      // crucial

      xhr.responseType = "blob";

      xhr.onload = function () {

        if (this.status == 200) {

          // Get one blob object

          var blob = this.response;

          console.log("blob", blob)

          // crucial

          let oFileReader = new FileReader();

          oFileReader.onloadend = function (e) {

            let base64 = e.target.result;

            console.log(" Mode one 》》》》》》》》》", base64)

          };

          oFileReader.readAsDataURL(blob);

          //==== To display pictures on the page , You can delete ====

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

          img.onload = function (e) {

            window.URL.revokeObjectURL(img.src); // Clear and release

          };

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

          img.src = src

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

          //==== To display pictures on the page , You can delete ====

        }

      }

      xhr.send();

    }

  </script>

</body>

</html>

Mode two :canvas.toDataURL() Method

Realization principle :

Use canvas.toDataURL() Method

Need to solve the cross domain problem of pictures image.crossOrigin = '';

Used Jquery Library $.Deferred() Method

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>

<htmllang="en">

<head>

  <metacharset="UTF-8">

  <metaname="viewport"content="width=device-width, initial-scale=1.0">

  <metahttp-equiv="X-UA-Compatible"content="ie=edge">

  <title>js Picture turn base64 The way </title>

</head>

<body>

<pid="container2"></p>

  <scriptsrc="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 When calling, the specific pixel value is passed in , Control size , If not, the default image size is

    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();

      // crucial

      image.crossOrigin = '';

      image.src = img;

      // crucial

      var deferred = $.Deferred();

      if (img) {

        image.onload = function () {

          deferred.resolve(getBase64Image(image));// take base64 Pass to done Upload processing

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

        }

        return deferred.promise();// The question is to make onload When you're done return sessionStorage['imgTest']

      }

    }

    getCanvasBase64(imgSrc)

      .then(function (base64) {

        console.log(" Mode two 》》》》》》》》》",base64);

      }, function (err) {

        console.log(err);

      });

  </script>

</body>

</html>

原网站

版权声明
本文为[Snail games]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202130614386971.html