Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39384 > unrolled thread

blob from createobjecturl

Back to article view | Back to comp.lang.javascript

Contents

  blob from createobjecturl Andrew Poulos <ap_prog@hotmail.com> - 2021-01-24 14:19 +1100
    Re: blob from createobjecturl Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-01-24 05:01 +0100
      Re: blob from createobjecturl Andrew Poulos <ap_prog@hotmail.com> - 2021-01-25 07:40 +1100
        Re: blob from createobjecturl Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-01-24 22:26 +0100
    Re: blob from createobjecturl JJ <jj4public@gmail.com> - 2021-01-24 19:29 +0700
      Re: blob from createobjecturl Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-01-24 22:18 +0100
    Re: blob from createobjecturl "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-01-24 09:18 -0800

#39384 — blob from createobjecturl

A web page I'm working on create a number of images using

fetch(url)
   .then(response => {
     return response.blob();
   })
   .then(b => {
     myImage.src = URL.createObjectURL(b);
   })
   .catch(err => console.log(err));

The user can create/destroy as many images as they want.

If at some point the user wants to save an image, the page needs to send 
it to the server. Is it ok to send myImage.src to a PHP server and the 
server can correctly handle it or do I need to send the blob that was 
used to create the object URL?

Andrew Poulos

[toc] | [next] | [standalone]

#39385

Andrew Poulos wrote:

> A web page I'm working on create a number of images using
> 
> fetch(url)
>    .then(response => {
>      return response.blob();
>    })
>    .then(b => {
>      myImage.src = URL.createObjectURL(b);
>    })
>    .catch(err => console.log(err));
> 
> The user can create/destroy as many images as they want.
> 
> If at some point the user wants to save an image, the page needs to send
> it to the server. Is it ok to send myImage.src to a PHP server and the
> server can correctly handle it or do I need to send the blob that was
> used to create the object URL?

Can the user modify the image?  If not, and the server where the image is 
stored is the same from which it was obtained, then simply PUT or POST the 
original URI and let the server map that to the local filesystem.  This is 
much less expensive than PUTting/POSTing the BLOB.

Otherwise PUT or POST the BLOB and let the server handle that.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39389

On 24/01/2021 3:01 pm, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> A web page I'm working on create a number of images using
>>
>> fetch(url)
>>     .then(response => {
>>       return response.blob();
>>     })
>>     .then(b => {
>>       myImage.src = URL.createObjectURL(b);
>>     })
>>     .catch(err => console.log(err));
>>
>> The user can create/destroy as many images as they want.
>>
>> If at some point the user wants to save an image, the page needs to send
>> it to the server. Is it ok to send myImage.src to a PHP server and the
>> server can correctly handle it or do I need to send the blob that was
>> used to create the object URL?
> 
> Can the user modify the image?  If not, and the server where the image is
> stored is the same from which it was obtained, then simply PUT or POST the
> original URI and let the server map that to the local filesystem.  This is
> much less expensive than PUTting/POSTing the BLOB.

Too easy :-) Thanks, I posted the original URI and the server handled it.

> Otherwise PUT or POST the BLOB and let the server handle that.

The created BLOB isn't saved (whereas the URI is) so I would have to 
fetch it again.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#39391

Andrew Poulos wrote:

> On 24/01/2021 3:01 pm, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> A web page I'm working on create a number of images using
>>>
>>> fetch(url)
>>>     .then(response => {
>>>       return response.blob();
          ^^^^^^^^^^^^^^^^^^^^^^^
>>>     })
>>>     .then(b => {
>>>       myImage.src = URL.createObjectURL(b);
>>>     })
>>>     .catch(err => console.log(err));
>>>
>>> The user can create/destroy as many images as they want.
>>>
>>> If at some point the user wants to save an image, the page needs to send
>>> it to the server. Is it ok to send myImage.src to a PHP server and the
>>> server can correctly handle it or do I need to send the blob that was
>>> used to create the object URL?
>> 
>> Can the user modify the image?  If not, and the server where the image is
>> stored is the same from which it was obtained, then simply PUT or POST
>> the original URI and let the server map that to the local filesystem. 
>> This is much less expensive than PUTting/POSTing the BLOB.
> 
> Too easy :-) Thanks,

You’re welcome :)

> I posted the original URI and the server handled it.

One thing to keep in mind, though: This will use the image resource *as 
retrievable at the time of POST*, not at the time of GET.

So if it has changed or has become unavailable in the meantime, then the 
change/unavailability will be propagated to the user’s image album.  For a 
*snapshot*, you have to PUT or POST the BLOB as formerly retrieved by the 
client.
 
>> Otherwise PUT or POST the BLOB and let the server handle that.
> 
> The created BLOB isn't saved (whereas the URI is) so I would have to
> fetch it again.

You would just have to save it before you now return it, provided you have 
control over that part of the code.  See above.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39386

On Sun, 24 Jan 2021 14:19:46 +1100, Andrew Poulos wrote:
> A web page I'm working on create a number of images using
> 
> fetch(url)
>    .then(response => {
>      return response.blob();
>    })
>    .then(b => {
>      myImage.src = URL.createObjectURL(b);
>    })
>    .catch(err => console.log(err));
> 
> The user can create/destroy as many images as they want.
> 
> If at some point the user wants to save an image, the page needs to send 
> it to the server. Is it ok to send myImage.src to a PHP server and the 
> server can correctly handle it or do I need to send the blob that was 
> used to create the object URL?
> 
> Andrew Poulos

Object URL is only valid for the client.

For user download, you can use any URL on an Anchor element with `download`
attribute, and optionally the `type` attribute. Call it's `click()` method
to simulate a click and start the download.

[toc] | [prev] | [next] | [standalone]

#39390

JJ wrote:

> On Sun, 24 Jan 2021 14:19:46 +1100, Andrew Poulos wrote:
>> fetch(url)
>>    .then(response => {
>>      return response.blob();
>>    })
>>    .then(b => {
>>      myImage.src = URL.createObjectURL(b);
>>    })
>>    .catch(err => console.log(err));
>> […]
> 
> Object URL is only valid for the client.

More, “[t]he URL lifetime is tied to the document in the window on which it 
was created.”

<https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39388

On Saturday, January 23, 2021 at 9:20:00 PM UTC-6, Andrew Poulos wrote:
> A web page I'm working on create a number of images using 
> 
> fetch(url) 
> .then(response => { 
> return response.blob(); 
> }) 
> .then(b => { 
> myImage.src = URL.createObjectURL(b); 
> }) 
> .catch(err => console.log(err)); 
> 
> The user can create/destroy as many images as they want. 
> 
> If at some point the user wants to save an image, the page needs to send 
> it to the server. Is it ok to send myImage.src to a PHP server and the 
> server can correctly handle it or do I need to send the blob that was 
> used to create the object URL? 

You can post the blob to the server just fine:

```
var formData = new FormData();
...
formData.append("user_image", blob);
```

You shouldn't try to post a blob url as it doesn't have meaning outside the browser.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web