JavaScript-Canvas zum Laden von Bildern

In diesem Artikel wird der spezifische Code von JavaScript Canvas zum Laden von Bildern zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8">
        <title>Bild verwenden</title>
        <style type="text/css">
            * {
                /* Rand: 0;
                Polsterung: 0; */
                Box-Größe: Rahmenbox;
            }
            Leinwand {
                Rahmenbreite: 1px;
                Rahmenfarbe: #000000;
                Rahmenstil: durchgezogen;
            }
        </Stil>
    </Kopf>
    <Text>
        <Leinwand-ID="Leinwand"></Leinwand>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <Skripttyp="text/javascript">
            window.onload = (Ereignis) => {
                hauptsächlich()
            }
            
            Funktion main() {
                const canvas = document.getElementById("canvas");
                const ctx = canvas.getContext("2d");
                
                const inputFile = document.querySelector("Eingabe[Typ=Datei]");
                inputFile.onchange = (Ereignis) => {
                    const Dateien = Ereignis.Ziel.Dateien;
                    if (Dateienlänge > 0) {
                        const file = files[0]; // Erste Datei
                        console.log(Datei);
                        
                        const image = neues Bild();
                        image.src = URL.createObjectURL(Datei);
                        image.onload = Funktion(Ereignis) {
                            // console.log(Ereignis, dies);
                            URL.revokeObjectURL(diese.src);
                            
                            Leinwandbreite = Bildbreite;
                            Leinwandhöhe = Bildhöhe;
                            
                            ctx.drawImage(Bild, 0, 0);
                        }
                    }
                }
            }
        </Skript>
    </body>
</html>

Referenz: Link

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js+HTML5-Canvas zur Implementierung eines einfachen Ladebalken-Funktionsbeispiels (Fortschrittsbalken)
JS implementiert das Vorladen von Video-Audio/Video, um Screenshots zu erhalten (Canvas-Screenshots zurückgeben)
JS Canvas-Timer simuliert dynamische Ladeanimation
Mit JavaScript lässt sich der Fortschrittsbalken zum Laden einer Webseite ganz einfach erreichen
JavaScript implementiert den Ladefortschritt einer Webseite
Einfache Implementierung des Ladeeffekts des JS-Fortschrittsbalkens
Natives JS zum Erzeugen einer Ladeanimation für die Startseite
pace.js-Plugin für den Fortschrittsbalken beim Laden von Seiten
JavaScript zum Implementieren des Fortschrittsbalkencodes beim Laden der Seite
JavaScript Canvas realisiert Wasserball-Ladeanimation

<<: Einführung in die UFW-Firewall unter Linux

>>: So konfigurieren Sie Bash-Umgebungsvariablen in Linux