Shulou(Shulou.com)06/01 Report--

This article mainly shows you how to use URL.createObjectURL in JS. The content is simple and easy to understand. It is clearly organized. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn how to use URL.createObjectURL in JS.

preface

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The lifecycle of this URL and the document binding in the window in which it was created. This new URL object represents the specified File object or Blob object.

URL.createObjectURL() Syntax objectURL = URL.createObjectURL(object); Parameters

File object, Blob object, or MediaSource object used to create a URL.

return value

A DOMString contains an object URL that can be used to specify the contents of the source object.

Sample// html code// js code document.querySelector ('#file').onchange = function (e) { console.log(e.target.files[0]) console.log(URL.createObjectURL(e.target.files[0]))}

Paste the blob file resource address printed by the console above into your browser

blob:http://localhost:8080/1ece2bb1-b426-4261-89e8-c3bec43a4020

URL.revokeObjectURL()

Every time you call the createObjectURL() method, a new URL object is created, even if you have already created it with the same object as an argument. When these URL objects are no longer needed, each object must be freed by calling the URL.revokeObjectURL() method.

Browsers automatically release documents when they are unloaded, but for best performance and memory usage, you should release them voluntarily at a safe time.

syntax window.URL.revokeObjectURL(objectURL); parameters objectURL

A DOMString representing the URL object returned by calling the URL.createObjectURL() method.

Return value

undefined

Sample// html code

// js code document.querySelector ('#file').onchange = function (e) { const file = e.target.files[0] const URL1 = URL.createObjectURL(file) console.log(URL1) document.querySelector('#img1').src = URL1 URL.revokeObjectURL(URL1) const URL2 = URL.createObjectURL(file) console.log(URL2) document.querySelector('#img2').src = URL2}

Difference from FileReader.readAsDataURL(file)

If you don't know FileReader, you can read this article.

main difference

FileReader.readAsDataURL(file) can get a string of data:base64

URL.createObjectURL(blob) gets a memory URL for the current file

performing timing

createObjectURL is executed synchronously (immediately)

FileReader.readAsDataURL is executed asynchronously (over time)

memory usage

createObjectURL returns a hashed url and is stored in memory until document triggers an unload event (e.g. document close) or revokeObjectURL is executed to free it.

FileReader.readAsDataURL returns base64 with a lot of characters and consumes more memory than blob url, but is automatically purged from memory when not in use (via garbage collection).

Pro

Using createObjectURL saves performance and is faster, but requires manually freeing memory when not in use

If you don't care about device performance and want to get base64 of images, it is recommended to use FileReader.readAsDataURL

The above is "JS URL.createObjectURL how to use" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.