URL.createObjectURL

  • Revision slug: URL.createObjectURL
  • Revision title: URL.createObjectURL
  • Revision id: 450411
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Added information about Web WorkerMoved From Web/API/window.URL.createObjectURL to URL.createObjectURL

Revision Content

Summary

Creates a new object URL, whose lifetime is tied to the {{domxref("document")}} in the window on which it was created. The new object URL represents the specified {{domxref("File")}} object or {{domxref("Blob")}} object.

Syntax

objectURL = window.URL.createObjectURL(blob);
  • blob is a {{domxref("File")}} object or a {{domxref("Blob")}} object to create a object URL for.
  • objectURL is the generated object URL. The entire contents of the specified file are represented by the text of the URL.

Example

See Using object URLs to display images.

Notes

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling {{domxref("window.URL.revokeObjectURL()")}} when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 {{ property_prefix("webkit") }}
{{CompatChrome(23)}}
{{CompatGeckoDesktop(8)}} {{CompatIE(10)}} {{CompatOpera(15)}} {{CompatSafari(6)}} {{property_prefix("webkit")}}
In a {{ domxref("Worker", "Web Worker") }} 10 {{ property_prefix("webkit") }}
{{CompatChrome(23)}}
{{CompatGeckoDesktop(21)}} {{CompatIE(11)}} {{CompatOpera(15)}} {{CompatSafari(6)}} {{property_prefix("webkit")}}
Feature Chrome for Android Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 18 4.0 14.0 {{CompatUnknown}} {{CompatUnknown}} 6.0

See also

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>Creates a new object URL, whose lifetime is tied to the {{domxref("document")}} in the window on which it was created. The new object URL represents the specified {{domxref("File")}} object or {{domxref("Blob")}} object.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>objectURL</em> = window.URL.createObjectURL(blob);
</pre>
<ul>
  <li><code>blob</code> is a {{domxref("File")}} object or a {{domxref("Blob")}} object to create a object URL for.</li>
  <li><code>objectURL</code> is the generated object URL. The entire contents of the specified file are represented by the text of the URL.</li>
</ul>
<h2 id="Example" name="Example">Example</h2>
<p>See <a href="/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Each time you call <code>createObjectURL()</code>, a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling {{domxref("window.URL.revokeObjectURL()")}} when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-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>8 {{ property_prefix("webkit") }}<br>
          {{CompatChrome(23)}}</td>
        <td>{{CompatGeckoDesktop(8)}}</td>
        <td>{{CompatIE(10)}}</td>
        <td>{{CompatOpera(15)}}</td>
        <td>{{CompatSafari(6)}} {{property_prefix("webkit")}}</td>
      </tr>
      <tr>
        <td>In a {{ domxref("Worker", "Web Worker") }}</td>
        <td>10 {{ property_prefix("webkit") }}<br>
          {{CompatChrome(23)}}</td>
        <td>{{CompatGeckoDesktop(21)}}</td>
        <td>{{CompatIE(11)}}</td>
        <td>{{CompatOpera(15)}}</td>
        <td>{{CompatSafari(6)}} {{property_prefix("webkit")}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome for Android</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>18</td>
        <td>4.0</td>
        <td>14.0</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>6.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{domxref("window.URL.revokeObjectURL()")}}</li>
  <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
  <li><a class="external" href="http://www.w3.org/TR/FileAPI/#dfn-createObjectURL" title="http://dev.w3.org/2006/webapi/FileAPI/#url">File API</a> specification</li>
</ul>
Revert to this revision