suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie js, um Bilder in Base64 zu konvertieren

So verwenden Sie js, um Bilder in Base64 zu konvertieren

php中世界最好的语言
php中世界最好的语言Original
2018-06-06 11:44:222508Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit js Bilder in base64 konvertieren und welche Vorsichtsmaßnahmen für die Verwendung von js zum Konvertieren von Bildern in base64 gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Methode 1: Blob- und FileReader-Objekte

Implementierungsprinzip:

Verwenden Sie xhr, um Bilder anzufordern, und legen Sie den zurückgegebenen Dateityp auf Blob-Objekt fest [ xhr .responseType = "blob"]

Verwenden Sie das FileReader-Objekt, um den Blob zu empfangen

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

Methode 2: canvas.toDataURL()-Methode

Implementierungsprinzip:

Verwenden Sie die Methode „canvas.toDataURL()“

Das domänenübergreifende Problem von Bildern muss gelöst werden image.crossOrigin = '';

Verwenden Sie $. Deferred()-Methode der Jquery-Bibliothek

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man das Vue-Projekt international entwickelt

Wie man eine Popup-Box-Funktion erstellt das WeChat-Applet

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js, um Bilder in Base64 zu konvertieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über die Verwendung von vue-fontawesome in vue.jsNächster Artikel：Über die Verwendung von vue-fontawesome in vue.js

In Verbindung stehende Artikel

Mehr sehen