Nein, ich bin sehr sicher, dass jCanvas die Funktion drawImage der Canvas-API benutzt. Die API ist im Browser eingebaut und man kann sie benutzen, ohne etwas einzubinden. Diese Funktion hat für die Abmessungen und die Position die selben Parameter. Offenbar liegt es daran, wie das Verkleinern im Browser implementiert ist. Das ist eine Wissenschaft für sich und es gibt verschiedene Methoden, die sich in Qualität und Schnelligkeit unterscheiden.
Beiträge von Sempervivum
-
-
Ah ja, interessante Information, danke! Ich benutze Opera, werde es mal mit anderen Browsern testen.
-
Aber natürlich. Du brauchst nur etwas Ausdauer und Beharrlichkeit. Nicht gleich bei den ersten Problemen aufgeben und wenn es gar nicht geht, im Forum fragen.
Und Schritt für Schritt vorgehen. Das Kontaktformular z. B. ist eine Wissenschaft für sich. Ich empfehle, es zunächst zurückzustellen.
-
Zitat
Wenn ich jetzt ein 7x7 grosen Würfel habe in Regenbogen Farbe ,wie kann man das den verkleinern .Das währen ja 7 Farben auf ein Pixel. Nur wie siehts da aus .Gemischt ,unsortiert oder wie original
Das ist schlicht unmöglich. Ein Pixel kann nur eine Farbe haben.
-
Für die Bilder in drei Spalten habe ich mal ein Beispiel gemacht, weil es aus den Links oben nicht so einfach ersichtlich ist, wie es geht.
Code
Alles anzeigen<style> .container { display: flex; flex-direction: row; flex-wrap: wrap; } .container figure { display: inline-block; flex-basis: calc(33% - 1em); margin: 0.5em; } .container figure img { width: 100%; height: auto; } .container figure figcaption { text-align: center; } </style> <div class="container"> <figure> <img src="images/dia0.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> <figure> <img src="images/dia1.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> <figure> <img src="images/dia2.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> <figure> <img src="images/dia3.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> <figure> <img src="images/dia4.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> <figure> <img src="images/dia5.jpg" /> <figcaption>Dies ist die Bildbeschriftung</figcaption> </figure> </div>
-
Zitat
Soll es beides mal der gleiche Link sein?
Oh nein, für die Bilder dieser:
-
Da hast Du ja noch eine Menge Arbeit vor dir. Lies dir mal diese Seite durch, dort wird beschrieben, wie man mit Hilfe von Flexlayout Element anordnet:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
Und dieses, dort wird beschrieben, wie man Bilder mit Beschreibungen anlegt:
-
In dem Fiddle aus #21 hast Du die Größe des Bildes nicht geändert
Ich bin mir ziemlich sicher, dass dieses richtig ist, aber dabei kommt nur Grau heraus, das Blaue geht verloren:
https://jsfiddle.net/Sempervivum/ggdqbafq/1/
Mache ich das Verkleinern mit meiner Bildbearbeitung, kommt Hellblau heraus. Entweder in dem Skript ist noch ein Fehler oder es liegt am Verkleinern durch die Canvas-API.
-
Zitat
Wüsste nicht wie ich das schreiben müsste
Siehe hier:
https://projects.calebevans.me/jcanvas/docs/images/
Bei "Custom width/height"
-
Zitat
Wie kann ich denn am besten Javascript lernen.
Ich würde sagen, gleich hier:
https://www.html-seminar.de/javascript.htm -
Zitat
Was macht den das fromCenter ?
Das wird hier erklärt:
https://projects.calebevans.me/jcanvas/docs/rectangles/
Zitatweil ich auch nicht weiss was das macht.
Ich habe es heraus gefunden, indem ich die RGB-Werte in der Console ausgegeben habe. Dabei sah man sofort, dass in jeder Zeile 32-mal 0,0,0 ausgegeben wurde.
ZitatWie functioniert das den bei dir
Wenn man setPixels aufruft, führt jCanvas natürlich auch ein Schleife über alle Pixel aus und ruft für jedes Pixel das each-Callback auf. Soweit ich weiß, sind in der Funktion dann nur die RGB-Werte verfügbar. Braucht man x und y, muss man dies selber berechnen.
-
Zitat
wenn ich Kommentare von Post-Id 48 und ich es dann unterhalb schreibe haben alle Posts die Kommentare von Post-Id 48.
Ich vermute, dort befindest Du dich in einer Schleife über alle Posts. Um das Problem zu beheben. musst Du abfragen, ob der aktuelle Schleifendurchlauf für den Post ist, zu dem die Kommentare gehören.
-
-
Zitat
müsste wenn man Blau mit weiss mischt nicht hellblau rauskommen
Das stimmt natürlich. Muss ich mir mal ansehen ...
-
-
Das ist in der Tat ziemlich ineffizient:
1. Mit setPixels kann man das ganze Bild auf einmal abarbeiten. Ruft man setPixels für jedes Pixel auf mit width:1 und height:1 wird das Bild bei jedem Aufruf mit getImageData aus dem Canvas gelesen und mit putImageData zurück geschrieben.
2. Die RGB-Werte kann man in Variablen führen. Andernfalls muss für jedes Pixel der RGB-Wert aus dem Localstorage gelesen und zurück geschrieben werden.
Ich schlage dieses vor:
Code
Alles anzeigen<canvas id="avgcolor"></canvas> <script> var cv = $("#avgcolor"); var im = new Image(); im.onload = function () { var width = this.width, height = this.height; console.log(width, height); cv.attr("width", width).attr("height", height + 100); cv.drawImage({ layer: true, source: im.src, x: 0, y: 0, fromCenter: false, load: function () { var sumr = 0, sumg = 0, sumb = 0; cv.setPixels({ x: 0, y: 0, width: width, height: height, each: function (px) { sumr += px.r; sumg += px.g; sumb += px.b; } }); var nrpx = width * height; var avgr = Math.floor(sumr / nrpx), avgg = Math.floor(sumg / nrpx), avgb = Math.floor(sumb / nrpx); console.log(avgr, avgg, avgb); cv.drawRect({ width: 100, height: 100, x: 0, y: height, fromCenter: false, fillStyle: "rgb(" + avgr + "," + avgg + "," + avgb +")" }) } }); } im.src = "images/bg_sprite.png"; </script>
-
Getestet hatte ich das auch mit dem Ergenis, dass nur die Funktion aufgerufen wurde, die als erstes dem Event zugwiesen wurde.
-
Vor allem zunächst auf absolute Positionierung verzichten und ja, die Größe in Prozent zu definieren ist ebenfalls schon ein guter Ansatz. Poste doch mal das HTML, CSS und JS, möglicher Weise als ZIP-Datei oder die URL der Seite, falls sie online ist. Es geht ja hier um die Darstellung und die Dynamik der Balken braucht dafür nicht zu funktionieren.
-
Den Kern der Sache, nämlich die Funktion AN() finde ich nicht in dem Code, den Du gepostet hast. Hast Du das soweit selbst entwickelt oder von irgendwoher übernommen?
-
Wenn ich mich richtig erinnere, waren das dynamische Balken, die mit Canvas und jCanvas gezeichnet werden. Ich habe mir jetzt nicht die Mühe gemacht, die Threads heraus zu suchen.
Diese Frage wird häufig gepostet und das Problem ist vielschichtig und schwer in wenigen Sätzen zu beantworten. Generell kann man jedoch sagen, dass absolute Positionierung der Feind eines responsiven Layouts ist, wo sich die Elemente dynamisch an die Bildschirmabmessungen anpassen. Besser andere Layoutmöglichkeiten verwenden.