sohotcall

Javascript Blob

Apr 29th, 2021
78
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ///// url to blob
  2. function loadXHR(url) {
  3.     return new Promise(function(resolve, reject) {
  4.         try {
  5.             var xhr = new XMLHttpRequest()
  6.             xhr.open("GET", url)
  7.             xhr.responseType = "blob"
  8.             xhr.onerror = function() {reject("Network error.")}
  9.             xhr.onload = function() {
  10.                 if (xhr.status === 200) {resolve(xhr.response)}
  11.                 else {reject("Loading error:" + xhr.statusText)}
  12.             }
  13.             xhr.send()
  14.         }
  15.         catch(err) {reject(err.message)}
  16.     })
  17. }
  18. loadXHR("url-to-image").then(function(blob) {
  19.   // here the image is a blob
  20. })
  21.  
  22. ///// img to blob
  23. var img = new Image
  24. var c = document.createElement("canvas")
  25. var ctx = c.getContext("2d")
  26.  
  27. img.onload = function() {
  28.   c.width = this.naturalWidth     // update canvas size to match image
  29.   c.height = this.naturalHeight
  30.   ctx.drawImage(this, 0, 0)       // draw in image
  31.   c.toBlob(function(blob) {        // get content as JPEG blob
  32.     // here the image is a blob
  33.   }, "image/jpeg", 0.75)
  34. };
  35. img.crossOrigin = ""              // if from different origin
  36. img.src = "url-to-image"
  37.  
  38. ///// input type=file to blob
  39. $('#done-button').on('click', function () {
  40.   var file = $('#load-file')[0].files[0]
  41.   var fileReader = new FileReader()
  42.   fileReader.onloadend = function (e) {
  43.     var arrayBuffer = e.target.result
  44.     var fileType = $('#file-type').val()
  45.     blobUtil.arrayBufferToBlob(arrayBuffer, fileType).then(function (blob) {
  46.       console.log('here is a blob', blob)
  47.       console.log('its size is', blob.size)
  48.       console.log('its type is', blob.type)
  49.     }).catch(console.log.bind(console))
  50.   }
  51.   fileReader.readAsArrayBuffer(file)
  52. })
  53.  
  54. ///// submit blob
  55. var fd = new FormData()
  56. fd.append('fname', 'test.wav')
  57. fd.append('data', soundBlob)
  58. $.ajax({
  59.     type: 'POST',
  60.     url: '/upload.php',
  61.     data: fd,
  62.     processData: false,
  63.     contentType: false,
  64. }).done(function(data) {
  65.        console.log(data)
  66. })
  67.  
  68. ///// dataURL from/to blob
  69. function dataURLtoBlob(dataurl) {
  70.     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  71.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
  72.     while(n--){
  73.         u8arr[n] = bstr.charCodeAt(n)
  74.     }
  75.     return new Blob([u8arr], {type:mime})
  76. }
  77. function blobToDataURL(blob, callback) {
  78.     var a = new FileReader()
  79.     a.onload = (e) => callback( e.target.result )
  80.     a.readAsDataURL(blob)
  81. }
  82. var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==')
  83. blobToDataURL(blob, function(dataurl){
  84.     console.log(dataurl)
  85. })
  86.  
RAW Paste Data