Als «html5-canvas» getaggte Fragen

Canvas ist ein HTML-Element, das das dynamische, skriptfähige Rendern von 2D-Formen, 3D-Formen, Bitmap-Bildern und Animationen in 2D und 3D ermöglicht.

23
So löschen Sie die Leinwand zum Neuzeichnen
Nachdem ich mit zusammengesetzten Operationen experimentiert und Bilder auf die Leinwand gezeichnet habe, versuche ich nun, Bilder zu entfernen und zusammenzusetzen. Wie mache ich das? Ich muss die Leinwand löschen, um andere Bilder neu zu zeichnen. Dies kann eine Weile dauern, daher denke ich nicht, dass das Zeichnen eines neuen …
8
HTML5 Canvas vs. SVG vs. div
Was ist der beste Ansatz, um Elemente im laufenden Betrieb zu erstellen und sie bewegen zu können? Angenommen, ich möchte ein Rechteck, einen Kreis und ein Polygon erstellen und dann diese Objekte auswählen und verschieben. Ich verstehe, dass HTML5 drei Elemente bietet, die dies ermöglichen können: svg , canvas und …
7
Wie speichere ich einen HTML5-Canvas als Bild auf einem Server?
Ich arbeite an einem generativen Kunstprojekt, bei dem ich Benutzern ermöglichen möchte, die resultierenden Bilder von einem Algorithmus zu speichern. Die allgemeine Idee ist: Erstellen Sie ein Bild auf einem HTML5-Canvas mithilfe eines generativen Algorithmus Wenn das Bild fertig ist, können Benutzer die Zeichenfläche als Bilddatei auf dem Server speichern …
15
Speichern eines serverseitigen PNG-Bilds aus einer base64-Datenzeichenfolge
Ich verwende das JavaScript-Tool "Canvas2Image" von Nihilogic, um Leinwandzeichnungen in PNG-Bilder zu konvertieren. Was ich jetzt brauche, ist, die von diesem Tool generierten base64-Zeichenfolgen mithilfe von PHP in tatsächliche PNG-Dateien auf dem Server umzuwandeln. Kurz gesagt, ich generiere derzeit eine Datei auf der Clientseite mit Canvas2Image, rufe dann die base64-codierten …
10
Beschmutzte Leinwände dürfen nicht exportiert werden
Ich möchte meine Leinwand in einem Bild speichern. Ich habe diese Funktion: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } Es gibt mir Fehler: Nicht erfasster Sicherheitsfehler: Fehler beim Ausführen von 'toDataURL' auf 'HTMLCanvasElement': Beschmutzte Leinwände können möglicherweise nicht exportiert …
11
JS Client-seitige Exif-Ausrichtung: JPEG-Bilder drehen und spiegeln
Digitalkamera-Fotos werden häufig als JPEG mit einem EXIF-Tag "Orientierung" gespeichert. Um korrekt angezeigt zu werden, müssen Bilder je nach eingestellter Ausrichtung gedreht / gespiegelt werden. Browser ignorieren diese Informationen jedoch, um das Bild zu rendern. Selbst in großen kommerziellen Web-Apps kann die Unterstützung für die EXIF-Ausrichtung nur sporadisch sein 1 …
14
HTML5 Canvas Resize (Downscale) Bild Hohe Qualität?
Ich verwende HTML5-Canvas-Elemente, um die Größe von Bildern in meinem Browser zu ändern. Es stellt sich heraus, dass die Qualität sehr gering ist. Ich habe Folgendes gefunden: Deaktivieren Sie die Interpolation beim Skalieren eines <canvas>, aber es hilft nicht, die Qualität zu verbessern. Unten finden Sie meinen CSS- und JS-Code …
10
Wie behebe ich den Fehler getImageData ()? Die Zeichenfläche wurde durch Ursprungsdaten beschädigt.
Mein Code funktioniert auf meinem localhost sehr gut, aber auf der Site nicht. Ich habe diesen Fehler von der Konsole für diese Zeile erhalten .getImageData(x,y,1,1).data: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. Teil meines Codes: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || …
8
Zugriff auf JPEG EXIF-Rotationsdaten in JavaScript auf der Clientseite
Ich möchte Fotos basierend auf ihrer ursprünglichen Drehung drehen, wie sie von der Kamera in JPEG EXIF-Bilddaten festgelegt wurde. Der Trick ist, dass dies alles im Browser mit JavaScript und geschehen sollte <canvas>. Wie kann JavaScript auf JPEG zugreifen, ein lokales Datei-API-Objekt, lokale <img>oder entfernte <img>EXIF-Daten, um die Rotationsinformationen zu …
6
Ändern des Hintergrunds von three.js in eine transparente oder andere Farbe
Ich habe versucht, die Standardhintergrundfarbe meiner Leinwand von Schwarz auf Transparent / jede andere Farbe zu ändern - aber kein Glück. Mein HTML: <canvas id="canvasColor"> Mein CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> Wie Sie im folgenden Online-Beispiel sehen können, habe ich eine Animation an …
7
Wie kann man das absolut positionierte Element zur Mitte ausrichten?
Ich versuche, zwei Leinwand zusammen zu stapeln und daraus eine Leinwand mit zwei Ebenen zu machen. Ich habe hier ein Beispiel gesehen: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> …
103 css  html5-canvas 
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.