diff options
Diffstat (limited to 'files/de/web/api/blob/index.html')
| -rw-r--r-- | files/de/web/api/blob/index.html | 245 |
1 files changed, 245 insertions, 0 deletions
diff --git a/files/de/web/api/blob/index.html b/files/de/web/api/blob/index.html new file mode 100644 index 0000000000..352c978ac5 --- /dev/null +++ b/files/de/web/api/blob/index.html @@ -0,0 +1,245 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - Reference + - TopicStub + - checkTranslation +translation_of: Web/API/Blob +--- +<p>{{ APIRef("File API") }}</p> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Ein <code>Blob</code> ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf <code>Blob</code> und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.</p> + +<p>Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von <code>slice()</code> möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.</p> + +<p>Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.</p> + +<div class="note"> +<p>Note: The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code>exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p> +</div> + +<div class="note"> +<p>Zu beachten: Der <code>slice()-</code>Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: <code>blob.mozSlice()</code>. Safari: <code>blob.webkitSlice()</code>. Eine alte Version von <code>slice()</code> ohne Vendor-Präfix ist überholt. Die Unterstützung von <code>blob.mozSlice()</code> wurde mit Firefox 30 eingestellt.</p> +</div> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("Blob.Blob", "Blob()")}}</dt> + <dd>Gibt einen neuen <code>Blob</code> zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<dl> + <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem <code>Blob</code> bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.</dd> + <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt> + <dd>Gibt die Größe des <code>Blob</code>-Inhalts in Bytes zurück.</dd> + <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt> + <dd>Ein <code>String,</code> der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<dl> + <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt> + <dd>Schließt das <code>Blob</code>-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.</dd> + <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> + <dd>Gibt ein neues <code>Blob-Objekt</code> zurück, das die spezifierte Menge an Daten enthält.</dd> +</dl> + +<h2 id="Beispiele">Beispiele:</h2> + +<h3 id="Beispielanwendung_des_Blob-Konstruktors">Beispielanwendung des Blob-Konstruktors</h3> + +<p>Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, <code>Blobs</code> aus Objekten zu erzeugen. Beispielsweise kann man einen <code>Blob</code> von einem String-Objekt erzeugen:</p> + +<pre><code>var debug = {hello: "world"}; +var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</code> +</pre> + +<div class="warning"> +<p>{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.</p> + +<div class="syntaxbox"> +<pre class="brush: js">var builder = new BlobBuilder(); +var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; +builder.append(fileParts[0]); +var myBlob = builder.getBlob('text/xml');</pre> +</div> +</div> + +<h3 id="Erstellen_einer_URL_für_ein_typed_array_durch_einen_Blob">Erstellen einer URL für ein "typed array" durch einen Blob</h3> + +<p>Beispiel-Code:</p> + +<pre class="brush: js">var typedArray = EinTypedArrayErstellen(); +var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ +var url = URL.createObjectURL(blob); +// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf +// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src) +</pre> + +<h3 id="Daten_aus_einem_Blob_lesen">Daten aus einem Blob lesen</h3> + +<p>Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.</p> + +<pre class="brush: js">var reader = new FileReader(); +reader.addEventListener("loadend", function() { + // reader.result beinhaltet den Inhalt des Blobs +}); +reader.readAsArrayBuffer(blob);</pre> + +<p>Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Hinweis</th> + </tr> + <tr> + <td>{{SpecName('File API','#blob','Blob')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Grundlegende Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>5[1]</td> + <td>4[2]</td> + <td>10</td> + <td>11.10[1]</td> + <td>5.1[1]</td> + </tr> + <tr> + <td><code>slice()</code></td> + <td>10 {{property_prefix("webkit")}}<br> + 21</td> + <td>5 {{property_prefix("moz")}}[3]<br> + 13</td> + <td>10</td> + <td>12</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>Blob()</code>constructor</td> + <td>20</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6</td> + </tr> + <tr> + <td><code>close()</code>and <code>isClosed</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>slice()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Blob()</code>constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>close()</code>and <code>isClosed</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<br> + </td> + </tr> + </tbody> +</table> + +<h3 id="Anmerkung_zur_slice()-Implementierung">Anmerkung zur slice()-Implementierung</h3> + +<p>[1] Eine Version von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> und <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von <code><a href="http://trac.webkit.org/changeset/83873">Blob.webkitSlice()</a>.</code></p> + +<p>[2] Eine Variante von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von <code>mozSlice()</code>.</p> + +<p>[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.</p> + +<p>[4] Siehe {{bug("1048325")}}</p> + +<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3> + +<p>Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.</p> + +<h2 id="Chrome_Code_-_Scope">Chrome Code - Scope</h2> + +<p>Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:</p> + +<pre class="brush: js">Cu.importGlobalProperties(['Blob']); +</pre> + +<p><code>Blobs</code> sind auch in Worker-Scopes verfügbar.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{ domxref("BlobBuilder") }}</li> + <li>{{ domxref("File") }}</li> + <li>{{ domxref("URL.createObjectURL") }}</li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> |