JavaScript-Canvas zum Erzielen eines Spiegelbildeffekts

In diesem Artikel wird der spezifische Code für JavaScript-Canvas zur Erzielung des Spiegelbildeffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

<!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>
        <canvas id="Spiegel"></canvas>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <Skripttyp="text/javascript">
            window.onload = (Ereignis) => {
                hauptsächlich()
            }
            
            Funktion main() {
                const canvas = document.getElementById("canvas");
                const mirror = document.getElementById("spiegel");
                const ctx = canvas.getContext("2d");
                const mirrorCtx = mirror.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;
                            Spiegelbreite = Bildbreite;
                            Spiegelhöhe = Bildhöhe;
                            
                            ctx.drawImage(Bild, 0, 0);
                            
                            const emptyImageData = ctx.createImageData(canvas.width, canvas.height);
                            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            
                            // console.log(getPixel(imageData, 0, 0));
                            // console.log(getPixel(imageData, 0, 5));
                            // console.log(getPixel(imageData, 0, 9));
                            // console.log(getColor(imageData, 0, 0, "R"));
                            // console.log(getColor(imageData, 0, 5, "G"));
                            // console.log(getColor(imageData, 0, 9, "B"));
                            
                            // console.log(Bilddaten);
                            
                            // const uint8ClampedArray = imageData.data;
                            // uint8ClampedArray.Länge = Bilddaten.Breite * Bilddaten.Höhe * 4;
                            Konsole.log(Bilddaten.Daten[0]);
                            für(let h = 0; h < imageData.height; h++) {
                                für(let w = 0; w < imageData.width; w++) {
                                    const pixel = getPixel(imageData, h, imageData.width - w - 1);
                                    setPixel(emptyImageData, h, b, pixel);
                                }
                            }
                            mirrorCtx.putImageData(emptyImageData, 0, 0);
                            
                            console.log(Bilddaten, leereBilddaten);
                            
                            Funktion getPixel(Bilddaten, Zeile, Spalte) {
                                const uint8ClampedArray = imageData.data;
                                const width = Bilddatenbreite;
                                const Höhe = Bilddaten.Höhe;
                                const pixel = [];
                                für(lass i = 0; i < 4; i++) {
                                    pixel.push(uint8ClampedArray[Zeile * Breite * 4 + Spalte * 4 + i]);
                                }
                                Rückgabepixel;
                            }
                            
                            Funktion setPixel(Bilddaten, Zeile, Spalte, Pixel) {
                                const uint8ClampedArray = imageData.data;
                                const width = Bilddatenbreite;
                                const Höhe = Bilddaten.Höhe;
                                für(lass i = 0; i < 4; i++) {
                                    uint8ClampedArray[Zeile * Breite * 4 + Spalte * 4 + i] = Pixel[i];
                                }
                            }
                            
                            // Funktion getColor(Bilddaten, Zeile, Spalte, Farbe) {
                            // const pixel = getPixel(Bilddaten, Zeile, Spalte);
                            // Schalter(Farbe) {
                            // Fall "R":
                            // Pixel[0] zurückgeben;
                            // Fall "G":
                            // Pixel[1] zurückgeben;
                            // Fall "B":
                            // Pixel[2] zurückgeben;
                            // Fall "A":
                            // Rückgabewert Pixel[3];
                            // }
                            // returniere null;
                            // }
                        }
                    }
                }
            }
        </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: