Javascript Blob Type Binary Options

A função atob decodificará uma seqüência codificada em base64 em uma nova seqüência com um caractere para cada byte dos dados binários. Cada ponto de código de caracteres (charCode) será o valor do byte. Podemos criar uma matriz de valores de byte aplicando isso usando o método. charCodeAt para cada caractere na seqüência de caracteres. Você pode converter essa matriz de valores de byte em uma matriz de bytes digitados real, passando-o para o construtor Uint8Array. Isso, por sua vez, pode ser convertido em um Blob, envolvendo-o em uma matriz passando-o para o construtor Blob. O código acima funciona. No entanto, o desempenho pode ser melhorado um pouco processando o byteCharacters em fatias menores, em vez de todos de uma vez. Em meu teste áspero 512 bytes parece ser um bom tamanho de fatia. Isso nos dá a seguinte função. Exemplo Completo:. Ou ES6: respondeu Apr 26 13 at 21:51 Note que atob isn39t suportado pelo IE9 e abaixo, apenas IE10. Mas então, isso é verdade para matrizes e blobs tipados também, então. -) ndash T. J. Crowder Apr 26 13 at 21:55 Para melhor performace (testado em FF20) use para em vez de chamar Array. prototype. map. call (slice, charCodeFromCharacter) e prealocate array byteNumbers new Array (slice. length). Eu notei, que o Internet Explorer 11 fica incrivelmente lento ao cortar os dados como jeremy sugerido. Isso é verdade para o Chrome, mas o IE parece ter um problema ao passar os dados cortados para o Blob-Constructor. Na minha máquina, passar 5 MB de dados faz IE crash e consumo de memória está passando pelo telhado. O Chrome cria o blob em nenhum momento. Executar este código para um comparismo: Então eu decidi incluir ambos os métodos descritos por jeremy em uma função. Créditos vão para ele para isso. Solução fornecida por Jeremy Banks trabalhou para mim. No entanto, eu tive que obter ajuda de outras fontes desde que eu estou usando ng-flow para upload de imagens. Quando a página da Web é carregada e as imagens são recuperadas da Base de Dados, essas imagens devem ser adicionadas de volta à matriz flow. files. As imagens são salvas no banco de dados usando seqüência Base64. Então, durante a carga da página, a única maneira para mim foi converter seqüência do Base64 para Blob e adicionar os arquivos de volta para a matriz flow. files. Isso permitiu que o controlador de fluxo funcionasse corretamente após a página ser carregada a partir do banco de dados. A seguir estão os passos: Adicionar diretiva carga-foto e adicioná-lo ao elemento de entrada additionalimage1 que tem a seqüência de base64 carregado de banco de dados no documento pronto evento usando jQuery. Adicione uma diretiva para acessar o elemento e chamar escopo scope. loadPhoto função no documento pronto para carregar a foto. Na função carregar foto, converta o Base64 para Blob e adicione o arquivo ao controle de fluxo. Assegure-se de que a variável de escopo scope. imageStringB64 eo elemento de entrada additionalimage1 sejam sincronizados manualmente como o ng-model não funcionou como esperado. Isso ocorre porque código jQuery fora angular está carregando o elemento de entrada do banco de dados, e descobri que eles não são vinculados dinamicamente. Veja este exemplo de código para mais opções para converter imagem Base64 para blob e de volta para Base64: Trabalhando com arquivos em JavaScript, Parte 5: Blobs Postado em 05 de junho de 2012 por Nicholas C. Zakas Até este ponto, esta série de postos tem focado Na interação com arquivos especificados pelo usuário e acessados ​​através de objetos File. O objeto File é na verdade uma versão mais específica de um Blob. Que representa um pedaço de dados binários. As propriedades tamanho e tipo existem em objetos Blob e são herdadas por Arquivo. Na maioria dos casos, Blob s e File s podem ser usados ​​nos mesmos lugares. Por exemplo, você pode ler um Blob usando um FileReader e você pode criar um URL de objeto de um Blob usando URL. createObjectURL (). Slicing Uma das coisas interessantes que você pode fazer com Blob s (e, portanto, também File s) é criar um novo Blob baseado em uma subseção de outro. Como cada Blob representa apenas ponteiros de dados em vez de dados, você pode criar rapidamente novos objetos Blob apontando para sub-partes de outros. Isso é realizado usando o método slice (). Você pode estar familiarizado com slice () em strings e arrays, e aquele para Blob s se comporta de maneira semelhante. O método aceita três argumentos: o deslocamento do byte inicial, o deslocamento do byte final e um tipo MIME opcional para aplicar ao Blob. Se o tipo MIME isn8217t especificado, o novo Blob tem o mesmo tipo de MIME que o original. Suporte de navegador para slice () isn8217t ainda onipresente, com o Firefox suportando via mozSlice () e webkitSlice () no Chrome (nenhum outro navegador suporta este método atualmente). Aqui um exemplo: Você pode então usar esta função para, por exemplo, dividir um arquivo grande para carregá-lo em pedaços. Cada novo Blob sendo produzido é independente do original, mesmo que os dados de cada referência tenha uma sobreposição. Os engenheiros do Flickr usam blob slicing para ler as informações Exif de fotos que são carregadas 1 em vez de aguardar no servidor. Quando o arquivo é selecionado, a página de upload do Flickr começa simultaneamente a fazer o upload do arquivo, bem como a ler as informações Exif da foto. Isso permite que eles dêem uma visualização dos metadados extraídos na página enquanto o arquivo está sendo carregado. Criando Blobs da maneira antiga Muito em breve depois que os objetos File começaram a aparecer nos navegadores, os desenvolvedores perceberam que os objetos Blob eram realmente bastante poderosos e assim queriam ser capazes de criá-los sem a interação do usuário. Afinal, todos os dados podem ser representados em um Blob. Ele doesn8217t necessariamente tem que ser amarrado a um arquivo. Os navegadores responderam rapidamente criando o BlobBuilder. Um tipo cujo único objetivo é envolver alguns dados em um objeto Blob. Este é um tipo não-padrão e foi implementado no Firefox (como MozBlobBuilder), Internet Explorer 10 (como MSBlobBuilder) e Chrome (como WebKitBlobBuilder). O BlobBuilder funciona criando uma nova instância e chamando o método append () com uma string, ArrayBuffer. Ou Blob. Uma vez que todos os dados foram adicionados, você chama getBlob () e passa um tipo MIME opcional que deve ser aplicado ao Blob. Um exemplo: A capacidade de criar URLs para partes arbitrárias de dados é incrivelmente poderosa, permitindo que você crie dinamicamente objetos que podem ser tratados como arquivos no navegador. Você poderia, por exemplo, usar um Blob para criar um web worker sem ter um arquivo separado para o código do trabalhador. Esta técnica foi escrita em The Basics of Web Workers 2: Este código cria um script simples e cria um URL de objeto. O URL do objeto é atribuído a um web worker no lugar de um URL de script. Você pode chamar append () quantas vezes quiser, criando o conteúdo do Blob. Criando Blobs a nova maneira Como os desenvolvedores continuavam clamando por uma maneira de criar objetos Blob diretamente e navegadores que chegavam com o BlobBuilder. Foi decidido adicionar um construtor Blob. Esse construtor agora faz parte da especificação e será a maneira como os objetos Blob serão criados no futuro. O construtor aceita dois argumentos. O primeiro é uma matriz de partes para combinar em um Blob. Estes seriam os mesmos valores passados ​​para o método append () do BlobBuilder e podem ser qualquer número de strings, Blob s e ArrayBuffer s. O segundo argumento é um objeto que contém propriedades para a recém-criada Blob. Existem atualmente duas propriedades definidas, digite. Que especifica o tipo MIME do Blob. E terminações. Que pode ser 8220transparent8221 (padrão) ou 8220native8221. Here8217s um exemplo: Como você pode ver, isso é muito mais simples do que usar BlobBuilder. O construtor Blob está atualmente nas compilações noturnas do Chrome e estará no Firefox 13. Outros navegadores ainda não anunciaram planos para implementar esse construtor, no entanto, ele agora faz parte do File API 3 padrão e deve ser implementado universalmente. Conclusão Esta é a última parte da série sobre como trabalhar com arquivos em JavaScript. Como espero que você aprendeu, a API de arquivos é incrivelmente poderosa e abre novas formas de trabalhar com arquivos em aplicativos da Web. Você não precisa mais ficar com caixas de upload de arquivos simples quando os usuários precisam fazer o upload de arquivos e agora que você pode ler os arquivos no cliente, isso abre todos os tipos de possibilidades para a manipulação do lado do cliente. Você pode redimensionar uma imagem que é muito grande antes de carregar (usando FileReader e ltcanvasgt), você pode criar um editor de texto que funciona puramente no navegador, você pode dividir arquivos grandes para fazer o upload peça por peça. As possibilidades não são intermináveis, mas estão muito perto. Referências Disclaimer: Todos os pontos de vista e opiniões expressas neste artigo são as de Nicholas C. Zakas e não, de qualquer forma, refletem as do meu empregador, meus colegas, Wrox Publishing. OReilly Publishing. Ou qualquer outra pessoa. Eu falo somente para mim, não para eles. Mensagens recentes Informações adicionaisJavaScript Blob. Object Blobs são objetos imutáveis ​​que representam dados brutos. O arquivo é uma derivação do Blob que representa dados do sistema de arquivos. Use FileReader para ler dados de um Blob ou arquivo. Blobs permitem que você construa arquivo como objetos no cliente que você pode passar para apis que esperam urls em vez de exigir que o servidor fornece o arquivo. Por exemplo, você pode construir um blob contendo os dados de uma imagem, usar URL. createObjectURL () para gerar url e passar esse URL para HTMLImageElement. src para exibir a imagem criada sem falar com um servidor. ConstrutoresEnviar e receber dados binários Receber dados binários usando arrays digitados JavaScript A propriedade r esponseType do objeto XMLHttpRequest pode ser definida para alterar o tipo de resposta esperada do servidor. Os valores possíveis são a string vazia (padrão), arraybuffer. Blob documento. Json E texto. A propriedade de resposta conterá o corpo da entidade de acordo com o responseType. Como um ArrayBuffer. Bolha. Documento. JSON. Ou corda. Isso é nulo se a solicitação não for concluída ou não for bem-sucedida. Este exemplo lê uma imagem como um arquivo binário e cria uma matriz de número inteiro sem assinatura de 8 bits a partir dos bytes raw. Observe que isso não irá decodificar a imagem e ler os pixels. Você vai precisar de uma biblioteca de decodificação png para isso. Uma alternativa ao método acima utiliza a interface Blob para construir diretamente um Blob com os dados arraybuffer. Além disso, você pode ler um arquivo binário como um Blob, definindo a string blob para a propriedade responseType. Recebendo dados binários em navegadores mais antigos A função loadbinaryresource () mostrada abaixo carrega dados binários do URL especificado, retornando-os ao chamador. A magia acontece na linha 5, que substitui o tipo MIME, forçando o navegador a tratá-lo como texto simples, usando um conjunto de caracteres definido pelo usuário. Isso informa o navegador para não analisá-lo e deixar os bytes passam por não processados. O exemplo acima obtém o byte no deslocamento x dentro dos dados binários carregados. O intervalo válido para x é de 0 a filestream. length-1. Recebendo dados binários em qualquer lugar A biblioteca jBinary para trabalhar com dados binários em JavaScript permite carregar dados de qualquer fonte com o melhor modo suportado detectado automaticamente no navegador atual ou Node. js: Envio de dados binários O método send do XMLHttpRequest foi estendido para permitir a transmissão fácil De dados binários, aceitando um ArrayBuffer. Bolha. Ou objeto Arquivo. O exemplo a seguir envia cria um arquivo de texto on-the-fly e usa o método POST para enviar o arquivo para o servidor. Este exemplo usa texto sem formatação, mas você pode imaginar os dados sendo um arquivo binário em vez disso. Envio de matrizes digitadas como dados binários Você também pode enviar matrizes de JavaScript digitadas como dados binários. Esta é a construção de uma matriz de 512 bytes de inteiros de 8 bits e enviá-lo você pode usar todos os dados binários youd como, é claro. Nota: O suporte para enviar objetos ArrayBuffer usando XMLHttpRequest foi adicionado ao Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). Adicione informações sobre outros navegadores aqui. Enviando formulários e arquivos de upload Exemplos específicos do Firefox Este exemplo transmite conteúdo binário de forma assíncrona, usando o método POST, e o Firefox não-padrão sendAsBinary (). A linha 4 define o cabeçalho Content-Length para 741, indicando que os dados têm 741 bytes de comprimento. Obviamente você precisa alterar esse valor com base no tamanho real dos dados que estão sendo enviados. A linha 5 usa o método sendAsBinary () para iniciar a solicitação. Nota: Este método não-padrão sendAsBinary é considerado obsoleto como do Gecko 31 (Firefox 31 / Thunderbird 31 / SeaMonkey 2.28) e será removido em breve. O método padrão de envio (dados Blob) pode ser usado como explicado acima. Você também pode enviar conteúdo binário passando uma instância do nsIFileInputStream para send (). Nesse caso, você não tem que definir o cabeçalho Content-Length sozinho, como as informações são obtidas do fluxo automaticamente: Documento Tags e ContributorsA Blob objeto representa um arquivo-como o objeto de imutável, dados brutos. Blobs representam dados que não são necessariamente em um formato JavaScript-nativo. A interface de arquivo é baseada no Blob. Herdando a funcionalidade blob e expandindo-a para suportar arquivos no sistema de usuários. Para construir um Blob a partir de outros objetos não-blob e dados, use o construtor Blob (). Para criar um blob que contém um subconjunto de outros dados blobs, use o método slice (). Para obter um objeto Blob para um arquivo no sistema de arquivos do usuário, consulte a documentação do arquivo. As APIs que aceitam objetos Blob também estão listadas na documentação do arquivo. Nota: O método slice () inicialmente tomou o comprimento como o segundo argumento para indicar o número de bytes a copiar para o novo Blob. Se você especificou valores tais que o comprimento de início excedeu o tamanho da fonte Blob. O Blob retornado continha dados do índice de início até o final do Blob de origem. Nota: Esteja ciente de que o método slice () tem prefixos de fornecedores em alguns navegadores e versões: blob. mozSlice () para Firefox 12 e anteriores e blob. webkitSlice () no Safari. Uma versão antiga do método slice (), sem prefixos de fornecedor, tinha semântica diferente e é obsoleta. Blob (blobParts, options) Retorna um objeto Blob recém-criado cujo conteúdo consiste na concatenação da matriz de valores dada no parâmetro. Propriedades Blob. isClosed Somente leitura Um valor booleano, indicando se o método Blob. close () foi chamado no blob. Blobs fechados não podem ser lidos. Blob. size Read only O tamanho, em bytes, dos dados contidos no objeto Blob. Blob. type Somente leitura Uma seqüência de caracteres indicando o tipo MIME dos dados contidos no Blob. Se o tipo for desconhecido, esta cadeia está vazia. Métodos Blob. close () Fecha o objeto blob, possivelmente liberando recursos subjacentes. Blob. slice (start, end, contentType) Retorna um novo objeto Blob contendo os dados no intervalo especificado de bytes da fonte Blob. Exemplos Uso do exemplo do construtor Blob O construtor Blob () permite criar blocos a partir de outros objetos. Por exemplo, para construir um blob a partir de uma string: Antes de o construtor Blob estar disponível, isso poderia ser feito através da API BlobBuilder, que agora está obsoleta: Exemplo para criar uma URL para uma matriz digitada usando um blob O código a seguir: Example for extracting Dados de um Blob A única maneira de ler o conteúdo de um Blob é usar um FileReader. O código a seguir lê o conteúdo de um Blob como uma matriz digitada. Usando outros métodos de FileReader. É possível ler o conteúdo de um Blob como uma string ou um URL de dados. Especificações 1 Uma versão do slice () tomando o comprimento como segundo argumento foi implementada no WebKit e no Opera 11.10. No entanto, uma vez que essa sintaxe diferia de Array. slice () e String. slice (). O WebKit removeu suporte e adicionou suporte para a nova sintaxe como Blob. webkitSlice (). 2 Uma versão de slice () tomando o comprimento como segundo argumento foi implementada no Firefox 4. No entanto, uma vez que a sintaxe diferia de Array. slice () e String. slice (). O Gecko removeu o suporte e adicionou suporte para a nova sintaxe como mozSlice (). 3 Antes do Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), havia um bug que afetou o comportamento de slice (), ele não funcionou para as posições de início e final fora do intervalo de valores de 64 bits assinados que ele tem agora Fixo para suportar valores não assinados de 64 bits. Notas sobre o Gecko: disponibilidade em código privilegiado Para usar do código do cromo, do escopo do JSM e do Bootstrap, é necessário importá-lo da seguinte forma: Blob está disponível nos escopos Worker. Veja também