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:
|
<<: Detaillierte Erklärung von MySQL Explain
>>: Methoden und Schritte zum Erstellen eines Docker-basierten Nginx-Dateiservers
Artikel empfehlen
JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion
In diesem Artikel wird der spezifische JavaScript...
Installieren Sie OpenSSL unter Windows und verwenden Sie OpenSSL zum Generieren öffentlicher und privater Schlüssel
1. Offizielle OpenSSL-Website Offizielle Download...
MySQL-Join-Abfrage (Left Join, Right Join, Inner Join)
1. Allgemeine Verbindungen für MySQL INNER JOIN (...
7 nützliche neue TypeScript-Funktionen
Inhaltsverzeichnis 1. Optionale Verkettung 2. Nul...
Detaillierte Verwendung der MySQL-Funktionen row_number() und over()
Syntaxformat: row_number() über (Partition durch ...
Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)
Teilen Sie eine wunderschöne Bibliothek im Animat...
Richtige Schritte zur Installation von Nginx unter Linux
Vorwort Wenn Sie wie ich ein fleißiger Java-Backe...
Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
Verwendung von Markierungs-Tags im CSS-Listenmodell
In diesem Artikel werden hauptsächlich die Stilat...
Der Abstand zwischen mehreren Divs mit Inline-Block unterscheidet sich von der Programmiermethode
Als ich mich mit Inline-Blöcken beschäftigte, stel...
Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst
1. Was ist Phantomlesen? Wenn bei einer Transakti...
Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen
Inhaltsverzeichnis js aufrufende Methode Android ...
So löschen Sie Tabellendaten in MySQL
Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...
Eine schnelle Lösung für den Fehler #1929 Falscher Datums-/Uhrzeitwert: '''' für die Spalte ''createtime'' bei Verwendung von MySQL 5.x oder höher
Nachdem ich MySQL installiert hatte, erhielt ich ...
Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel
Kürzlich habe ich MySQL verwendet, um Tabellendat...