From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-pt/web/api/blob/blob/index.html | 77 +++++++++++++++ files/pt-pt/web/api/blob/index.html | 157 +++++++++++++++++++++++++++++++ files/pt-pt/web/api/blob/size/index.html | 73 ++++++++++++++ files/pt-pt/web/api/blob/type/index.html | 83 ++++++++++++++++ 4 files changed, 390 insertions(+) create mode 100644 files/pt-pt/web/api/blob/blob/index.html create mode 100644 files/pt-pt/web/api/blob/index.html create mode 100644 files/pt-pt/web/api/blob/size/index.html create mode 100644 files/pt-pt/web/api/blob/type/index.html (limited to 'files/pt-pt/web/api/blob') diff --git a/files/pt-pt/web/api/blob/blob/index.html b/files/pt-pt/web/api/blob/blob/index.html new file mode 100644 index 0000000000..a00a527076 --- /dev/null +++ b/files/pt-pt/web/api/blob/blob/index.html @@ -0,0 +1,77 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Blob + - Construtor + - File API + - Referencia +translation_of: Web/API/Blob/Blob +--- +
{{APIRef("File API")}}
+ +

O construtor Blob() devolve um novo objeto {{domxref("Blob")}}. O conteúdo do objeto Blob consiste na concatenação dos valores na matriz do primeiro parâmetro.

+ +

Sintaxe

+ +
var novoBlob = new Blob(array, options);
+
+ +

Parâmetros

+ +
+
array
+
Uma {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}}, {{domxref("USVString")}}, ou uma mistura de quaisquer desses objetos, que serão colocados dentro do objeto {{domxref("Blob")}}. Os objetos USVString são codificados como UTF-8.
+
options {{optional_inline}}
+
+

Um objeto opcional do tipo {{domxref("BlobPropertyBag")}} que pode especificar qualquer uma das seguintes propriedades:

+ +
+
type {{optional_inline}}
+
O {{Glossary("MIME type", "tipo MIME")}} dos dados que serão armazenados no blob. O valor predefinido é uma string vazia, ("").
+
endings {{optional_inline}} {{non-standard_inline}}
+
Como interpretar os caracteres de nova linha (\n), se os dados são textos. O valor predefinido, transparent, copia os caracteres da nova linha para o blob sem os alterar. Para converter as novas linhas para a convenção nativa do sistema anfitrião, use o valor native.
+
+
+
+ +

Valor devolvido

+ +

Um novo objeto {{domxref("Blob")}} que contém os dados especificados.

+ +

Exemplo

+ +
var dadosParaFicheiro = ['<a id="a"><b id="b">hey!</b></a>']; // uma matriz constituída por uma única DOMString
+var oMeuBlob = new Blob(dadosParaFicheiro, {type : 'text/html'}); // o blob
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Definição inicial.
+ +

Compatibilidade

+ + + +

{{Compat("api.Blob.Blob")}}

+ +

Ver também

+ + diff --git a/files/pt-pt/web/api/blob/index.html b/files/pt-pt/web/api/blob/index.html new file mode 100644 index 0000000000..878bc85e5e --- /dev/null +++ b/files/pt-pt/web/api/blob/index.html @@ -0,0 +1,157 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Blob + - File API + - Interface + - NeedsTranslation + - Raw + - Reference + - TopicStub + - data +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a {{DOMxRef("ReadableStream")}} so its methods can be used for processing the data.

+ +

Blobs can represent data that isn't necessarily in a JavaScript-native format. The {{DOMxRef("File")}} interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

+ +

Using blobs

+ +

To construct a Blob from other non-blob objects and data, use the {{DOMxRef("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{DOMxRef("Blob.slice()", "slice()")}} method. To obtain a Blob object for a file on the user's file system, see the {{DOMxRef("File")}} documentation.

+ +

The APIs accepting Blob objects are also listed in the {{DOMxRef("File")}} documentation.

+ +

Constructor

+ +
+
{{DOMxRef("Blob.Blob", "Blob()")}}
+
Returns a newly created Blob object which contains a concatenation of all of the data in the array passed into the constructor.
+
+ +

Instance properties

+ +
+
{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}
+
The size, in bytes, of the data contained in the Blob object.
+
{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}
+
A string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.
+
+ +

Instance methods

+ +
+
{{DOMxRef("Blob.prototype.arrayBuffer()")}}
+
Returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}} containing the entire contents of the Blob as binary data.
+
{{DOMxRef("Blob.prototype.slice()")}}
+
Returns a new Blob object containing the data in the specified range of bytes of the blob on which it's called.
+
{{DOMxRef("Blob.prototype.stream()")}}
+
Returns a {{DOMxRef("ReadableStream")}} that can be used to read the contents of the Blob.
+
{{DOMxRef("Blob.prototype.text()")}}
+
Returns a promise that resolves with a {{DOMxRef("USVString")}} containing the entire contents of the Blob interpreted as UTF-8 text.
+
+ +

Examples

+ +

Creating a blob

+ +

The {{DOMxRef("Blob.Blob", "Blob()")}} constructor can create blobs from other objects. For example, to construct a blob from a JSON string:

+ +
const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+ +

Creating a URL representing the contents of a typed array

+ +

The following code creates a JavaScript typed array and creates a new Blob containing the typed array's data. It then calls {{DOMxRef("URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.

+ +

HTML

+ +
<p>This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.</p>
+ +

JavaScript

+ +

The main piece of this code for example purposes is the typedArrayToURL() function, which creates a Blob from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the {{HTMLElement("img")}} element's {{htmlattrxref("src", "img")}} attribute (assuming the data contains an image, of course).

+ +
function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i < 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);
+ +

Result

+ +

Click the link in the example to see the browser decode the object URL.

+ +

{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}

+ +

Extracting data from a blob

+ +

One way to read content from a Blob is to use a {{DOMxRef("FileReader")}}. The following code reads the content of a Blob as a typed array:

+ +
const reader = new FileReader();
+reader.addEventListener('loadend', () => {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

Another way to read content from a Blob is to use a {{domxref("Response")}}. The following code reads the content of a Blob as text:

+ +
const text = await (new Response(blob)).text();
+
+ +

Or by using {{DOMxRef("Blob.prototype.text()")}}:

+ +
const text = await blob.text();
+ +

By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#blob-section', 'The Blob interface')}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Blob")}}

+ +

See also

+ + diff --git a/files/pt-pt/web/api/blob/size/index.html b/files/pt-pt/web/api/blob/size/index.html new file mode 100644 index 0000000000..fc6423a199 --- /dev/null +++ b/files/pt-pt/web/api/blob/size/index.html @@ -0,0 +1,73 @@ +--- +title: Blob.size +slug: Web/API/Blob/size +tags: + - API + - Blob + - Bytes + - Ficheiros + - File API + - Propriedade + - Referencia + - length + - size +translation_of: Web/API/Blob/size +--- +
{{APIRef("File API")}}
+ +

A propriedade size da interface do {{domxref("Blob")}} retorna o tamanho do {{domxref("Blob")}} ou {{domxref("File")}} em bytes.

+ +

Sintaxe

+ +
var sizeInBytes = blob.size
+
+ +

Valor

+ +

O número de bytes de dados contidos dentro do Blob (ou do objeto baseado em Blob, como um {{domxref("File")}}).

+ +

Exemplo

+ +

Este exemplo usa um {{HTMLElement("input")}} com os atributos type="file" e multiple para receber do utilizador um grupo de ficheiros, e depois um iterar sobre os ficheiros que emitem os seus nomes e comprimentos em bytes.

+ +
// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
+}
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('File API', '#dfn-size', 'Blob.size')}}{{Spec2('File API')}}Definição inicial
+ +

Compatibilidade

+ +
+ + +

{{Compat("api.Blob.size")}}

+
+ +

Ver também

+ + diff --git a/files/pt-pt/web/api/blob/type/index.html b/files/pt-pt/web/api/blob/type/index.html new file mode 100644 index 0000000000..5744a80a5b --- /dev/null +++ b/files/pt-pt/web/api/blob/type/index.html @@ -0,0 +1,83 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - Blob + - DOM + - File + - File API + - Formato + - MIME + - MIME Type + - Propriedade + - Referencia + - tipo +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

A propriade type do objeto {{domxref("Blob")}} devolve o {{Glossary("MIME type")}} do ficheiro.

+ +

Sintaxe

+ +
var mimetype = blob.type
+ +

Valor

+ +

Uma {{domxref("DOMString")}} que contem o MIME do ficheiro, ou uma string vazia se o tipo não consegue ser determinado.

+ +

Exemplo

+ +

Este exemplo pede ao utilizador que selecione uma série de ficheiros, depois verifica cada ficheiro para se certificar de que é um de um determinado conjunto de tipos de ficheiros de imagem.

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput é um HTMLInputElement: <input type="file" multiple id="myfileinput">
+fileInput = document.getElementById("myfileinput");
+
+// files é um objeto FileList (parecido ao NodeList)
+files = fileInput.files;
+
+// a nossa aplicação só aceita imagens GIF, PNG, e JPEG
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // Testar se file.type é um dos MIME types permitidos.
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // file.type é válido
+  }
+});
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('File API', '#dfn-type', 'Blob.type')}}{{Spec2('File API')}}Definição inicial.
+ +

Compatibilidade

+ +
+ + +

{{Compat("api.Blob.type")}}

+
+ +

Ver também

+ + -- cgit v1.2.3-54-g00ecf