2016-04-07 18 views
1

Wie können wir überprüfen, ob das hochgeladene Bild komprimiert ist oder nicht?Überprüfen, ob das hochgeladene Bild komprimiert ist oder nicht

Ich möchte ein Bild auf Leinwand zeichnen, dann komprimieren Sie es mit canvasContext.toDataUrl(type, quality), aber diese Komprimierung wird nur auf das Bild angewendet werden, wenn es nicht bereits komprimiert ist.

Haben Sie Vorschläge?

+0

Ich glaube nicht, dass es eine allgemeine "dieses Bild ist komprimiert" Flagge verfügbar ist. Sie können [Byte-Stream lesen] (http://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary/3146509#3146509) und interpretieren, aber dann müssen Sie Behandeln Sie alle verschiedenen Bildformate, die Sie behandeln möchten, und verstehen Sie, wie Sie feststellen können, ob sie komprimiert sind. –

+0

Sie konnten es von der hochgeladenen Größe und der Pixelgröße abziehen. Ein großes Bild mit einer niedrigen Byteanzahl ist wahrscheinlich komprimiert. – Alexander

+0

@Alexander, Ein Originalbild kann von niedriger Qualität sein. Ich bezweifle, dass dies ein Parameter sein könnte, da OP nach bereits komprimierten Bildern sucht. – Rayon

Antwort

2

Sie können feststellen, ob die Datei komprimiert ist, indem Sie sich den Dateityp ansehen. Wenn Sie die Zeichenfolge toDataURL() überprüfen, sehen Sie eine mime-type, die entweder eine PNG- oder JPEG-Datei definiert. In einigen Fällen, in denen Browser andere Dateiformate unterstützen, können Sie auch BMP- und ICO-Dateiformate sehen.

Wir wissen, dass eine PNG-Datei ist always compressed als PNG-Standard unterstützt nur Kompressionstyp 0, die LZ77-Komprimierung ist (auf der Leitung von Filtern, die die endgültige komprimierte Größe beeinflusst).

JPEG always compresses wie es DCT verwendet.

Komprimierung für BMP ist optional sowie für TIFF, obwohl keine Browser, die ich kenne, TIFF unterstützen out of the box. Es ist anzunehmen, dass BMP- und ICO-Dateien nicht komprimiert sind. Sie existieren in Komprimierungsformen wie RLE, aber diese sind selten und können Probleme für einige BMP-Parser verursachen. Um absolut sicher zu sein, müssten Sie die Binärdaten analysieren, um in der Kopfzeile nach Komprimierungsflags zu suchen.

Beachten Sie, dass toDataURL() immer auf einem unkomprimierten Rohbitmap arbeiten. Es spielt keine Rolle, ob das ursprüngliche Bild, das auf die Leinwand gezeichnet wurde, komprimiert wurde oder nicht - das ursprüngliche Bild wird immer in eine rohe Bitmap umgewandelt, bevor es gezeichnet wird (tatsächlich, wenn es geladen wird).

Nach Aufruf von toDataURL() wird jedoch das Binärbild, das intern erzeugt wird, in eine Base-64-Zeichenfolge konvertiert. Dies bedeutet eine Zunahme der Größe um 33% aufgrund der Funktionsweise von Base-64. Hinzu kommt: Jedes Zeichen in JavaScript belegt 2 Byte (das ist natürlich in einer JavaScript-Umgebung kein Problem). Die Länge der Saite ist also kein guter Indikator, da sie in manchen Fällen die Rohgröße (Breite x Höhe x 4) überschreiten kann (toBlob() ist auf Grund ihrer höheren Leistung und der reduzierten Größe auf jeden Fall eine bessere Alternative als toDataURL()) async/nicht blockierend).

+0

Ich bin nicht sicher, ob ich dem ersten Absatz dieser Antwort voll und ganz zustimme: "* Wenn Sie den String' toDataURL() '* überprüfen" "Wie später gesagt," * 'toDataURL()' arbeitet immer mit einem unkomprimierten Rohbitmap * "Wenn man sich die Ausgabe dieser Methode ansieht, ist es schon zu spät. Sie könnten das '.result' von' readsAsDataURL() 'jedoch untersuchen, aber in den meisten Fällen ist auch ein Blick auf die Dateierweiterung ein guter Ausgangspunkt. Außerdem denke ich, dass ein Wort über den Parameter "Qualität" für jpeg und webp gut gewesen wäre. Schließlich kann man in Browsern, die 'toBlob()' nicht unterstützen, ein dataURI zurück in ein Blob konvertieren. – Kaiido

+0

Auch könnte es ein guter Ort für einen Link zu Ihrem [Png-Crush] (https://github.com/epistemex/png-crush) Skript sein ;-) – Kaiido

Verwandte Themen