suchen

Heim >Web-Frontend >H5-Tutorial >HTML5 implementiert die Konvertierung hochgeladener Bilder in Base64-Kodierung zur Anzeige (Codebeispiel)

HTML5 implementiert die Konvertierung hochgeladener Bilder in Base64-Kodierung zur Anzeige (Codebeispiel)

青灯夜游
青灯夜游Original
2018-10-08 09:25:378879Durchsuche

In diesem Kapitel wird Ihnen die HTML5-Implementierung der Konvertierung hochgeladener Bilder in die Base64-Kodierung für die Anzeige vorgestellt (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lass uns zunächst einen genaueren Blick darauf werfenBase64-Kodierung:

Was ist Base64-Kodierung?

Base64 ist die am häufigsten verwendete Kodierungsmethode zur Übertragung von 8-Bit-Byte-Codes im Internet. Die Base64-Kodierung kann zur Übertragung langer Dateien in einer HTTP-Umgebung verwendet werden Informationen können auch in URLs verwendet werden (unter Verwendung einer verbesserten Base64-Kodierung für URLs). Da Base64 keine Angst vor der Lesbarkeit hat, dh die codierten Daten mit bloßem Auge nicht direkt sichtbar sind, verfügt es über eine bestimmte Verschlüsselungsfunktion.

Warum sollten Sie Bilder in die Base64-Kodierung konvertieren?

Konvertieren Sie das Bild in die Base64-KodierungEs wird hauptsächlich verwendet, um die Anzahl der Anfragen auf der Webseite zu reduzierenUnsere Website verwendet das http-Protokoll und das http-Protokoll Eine zustandslose Verbindung bedeutet, dass die Verbindung nach der Verbindung und Übertragung getrennt wird, um Ressourcen zu sparen. Die Lösung besteht zu diesem Zeitpunkt darin, HTTP-Anfragen so weit wie möglich zu reduzieren. Zu diesem Zeitpunkt kann die Base64-Codierung das Bild zum CSS hinzufügen, sodass das Bild durch Anfordern des CSS heruntergeladen werden kann, wodurch die Anforderung für das Bild erneut reduziert wird.

Wie konvertiere ich hochgeladene Bilder in die Base64-Kodierung für die Anzeige in HTML5?

Das Konvertieren von Bildern in Base64 erfordert die Verwendung einer HTML5-Schnittstelle: FileReader.readAsDataURL()-Schnittstelle . Diese Schnittstelle kann Dateien in das Base64-Codierungsformat konvertieren und dann anzeigen es in Form von Daten: URL
Idee:

1. Erstellen Sie drei HTML-Tags, die Eingabe wird zum Hochladen von Bildern verwendet und der Textbereich wird zum Anzeigen von Base64-Code verwendet Da es viele Base64-Codeinhalte gibt, wird das Textarea-Tag und das P-Tag zum Anzeigen von Bildern verwendet.
2. Rufen Sie mit js die API von FileReader.readAsDataURL() von HTML5 auf und deklarieren Sie drei Variablen zur Steuerung des Bild-Uploads, der Base64-Code-Anzeige und der Bildanzeige.
3.img_upload.addEventListener('change',readFile,false); Fügen Sie ein Listening-Ereignis hinzu und führen Sie die readFile-Funktion aus, wenn sich die hochgeladene Datei ändert.
4. Der Inhalt der readFile-Funktion besteht darin, die Schnittstelle aufzurufen, um das Bild in base64 zu konvertieren und es dann auszugeben.
5. Bevor Sie die Konvertierung und Ausgabe durchführen, stellen Sie zunächst fest, ob es sich bei der hochgeladenen Datei um ein Bild handelt.

Der Code lautet wie folgt: 

<!Doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html5 图片转base64编码</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.demo{
				width: 100%;
				margin: 50px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 抓取上传图片，转换代码结果，显示图片的dom
				var img_upload = document.getElementById("img_upload");
				var base64_code = document.getElementById("base64_code");
				var img_area = document.getElementById("img_area");
				// 添加功能出发监听事件
				img_upload.addEventListener(&#39;change&#39;, readFile, false);
			}

			function readFile() {
				var file = this.files[0];//这里是抓取到上传的对象。
				if(!/image\/\w+/.test(file.type)) {
					alert("请确保文件为图像类型");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function() {
					base64_code.innerHTML = this.result;
					//this.result里的这个result是FileReader.readAsDataURL()接口当中转换完图片输出的base64结果存放在result当中
					img_area.innerHTML = &#39;<div>图片img标签展示：</div><img src="&#39; + this.result + &#39;" alt=""/>&#39;;
				}
			}
		</script>
	</head>

	<body>
		<div class="demo">
			<input type="file" id="img_upload" />
			<textarea id="base64_code" rows="30" cols="100"></textarea>
			<p id="img_area"></p>
		</div>
	</body>
</html>

Sehen Sie sich das Rendering an:

HTML5 implementiert die Konvertierung hochgeladener Bilder in Base64-Kodierung zur Anzeige (Codebeispiel)

Zusammenfassung: Das Obige beschreibt die Konvertierung Bilder in Base64 in HTML5 umwandeln Sie können versuchen, alle Codes selbst zu kompilieren.

Das obige ist der detaillierte Inhalt vonHTML5 implementiert die Konvertierung hochgeladener Bilder in Base64-Kodierung zur Anzeige (Codebeispiel). 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：Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)Nächster Artikel：Mobile HTML5 simuliert ein Löschereignis durch langes Drücken (mit Code)

In Verbindung stehende Artikel

Mehr sehen