当前位置：网站首页>Blob URL DataURL

Blob URL DataURL

2022-07-22 17:07:00 【No overtime at the front end】

URL.createObjectURL() Static methods create a DOMString, It contains a... That represents the object given in the parameter URL. This URL Life cycle and create it in the window of document binding . This new URL Object represents the specified File Object or Blob object .

On each call createObjectURL() When the method is used , Will create a new one URL object , Even if you've created the same object as a parameter . When it's no longer needed URL Object time , Every object must be called by URL.revokeObjectURL() Method to release .

The following example uses objects URL display picture .

<body>
  <input type="file" id="input" onchange="handleFiles(this.files)">

  <script>
    function handleFiles (files) {
    
      let url = URL.createObjectURL(files[0])
      let img = new Image()
      console.log(img, 'ok')
      img.src = url
      var link = document.createElement("a");
      link.innerHTML = ' download '
      link.download = ' picture '
      link.href = url
      document.body.appendChild(img)
      document.body.appendChild(link)
    }
  </script>
</body>
// encapsulation 
export function blobUrlToDataURL (blob, cb) {
    
  var a = new FileReader()
  a.readAsDataURL(blob)//  The read file is saved in result in 
  a.onload = function (e) {
    
    var getRes = e.target.result//  The read result is in result in 
    cb && cb(getRes)
  }
}

Blob URL and Data URL What's the difference? ?

Blob URL The display form of blob: domain name /e61c67e3-df3a-453a-8f41-df740c1f5faf ,dataURL The form of display data:image/jpeg;base64,/9j/4AAQ…

Blob URL The length of is usually short , but Data URL Due to the direct storage of pictures base64 Encoded data , It's very long .Data-URI The problem is that everyone char stay JavaScript Two bytes in . most important of all , because Base-64 The code has been added 33％.Blob Is a pure binary byte array , It is not like Data-URI That has any significant overhead , This makes them faster and faster .

I can create my own on the server Blob Website ？

The answer is no ,Blob website / The object URL can only be made inside the browser . You can use the file reader API establish Blob And get the File object , Even though BLOB It just means Binary Large Object and store it as a byte array . The client can request data to ArrayBuffer or Blob In the form of . The server should send the data as pure binary data . Databases usually also use Blob To describe binary objects , In fact, we are basically talking about byte arrays .

Why is the video link address of the video website blob？

Production scenes are often on slice format video m3u8 address blob Format processing , It's not for encryption , Because browsers still parse blob And go to get Request corresponding m3u8 Address , Use blob uri The advantage is that it can interfere with reptiles at a certain level . In the early days, general website resource files did not pass referer Set up the anti-theft chain , When we get the address of the video, we can download or use it at will .Blob URL This URL Life cycle and create it in the window of document binding .

原网站

版权声明
本文为[No overtime at the front end]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207220517221322.html

边栏推荐

猜你喜欢

随机推荐