Saturday 11 November 2017

Javascript Ler Arquivo Como Binário Opções


ReadAsBinaryString diz que os dados devem ser representados como uma string binária. Onde: cada byte é representado por um inteiro no intervalo 0..255. JavaScript originalmente não tinha um tipo binário (até suporte ECMAScript 5s WebGL de digitado Matriz (detalhes abaixo) - que foi substituído pelo ECMAScript 2015s ArrayBuffer) e assim eles foram com uma String com a garantia de que nenhum personagem armazenado na seqüência seria Fora do intervalo 0..255. (Eles poderiam ter ido com uma série de números em vez, mas eles não deixaram talvez grandes Strings são mais memória-eficiente do que grandes conjuntos de números, já que números são de ponto flutuante). Se você está lendo um arquivo isso é principalmente texto em um script ocidental ( Principalmente inglês, por exemplo), então essa corda vai parecer muito com texto. Se você ler um arquivo com caracteres Unicode nele, você deve notar uma diferença, uma vez que as seqüências de caracteres JavaScript são UTF-16 (detalhes abaixo) e assim alguns caracteres terão valores acima de 255, enquanto que uma seqüência binária de acordo com a especificação File API não teria Quaisquer valores acima de 255 (youd têm dois caracteres individuais para os dois bytes do ponto de código Unicode). Se você está lendo um arquivo que não é texto (uma imagem, talvez), provavelmente ainda obterá um resultado muito semelhante entre readAsText e readAsBinaryString. Mas com readAsBinaryString você sabe que não haverá qualquer tentativa de interpretar sequências de vários bytes como caracteres. Você não sabe que se você usar readAsText. Porque readAsText usará uma determinação de codificação para tentar descobrir o que é a codificação de arquivos e, em seguida, mapeá-lo para seqüências de caracteres JavaScripts UTF-16. Você pode ver o efeito se você criar um arquivo e armazená-lo em algo diferente de ASCII ou UTF-8. (No Windows você pode fazer isso via Notepad Salvar como como uma codificação drop-down com Unicode nele, por que olhar para os dados que parecem significar UTF-16 Im certeza editores Mac OS e nix tem um recurso similar.) Heres uma página que despeja o resultado da leitura de um arquivo em ambos os sentidos: Se eu usar isso com um Testing 1 2 3 arquivo armazenado em UTF-16, aqui estão os resultados que recebo: Como você pode ver, readAsText interpretou os personagens e então eu tenho 13 (o comprimento do Teste 1 2 3) e readAsBinaryString didnt, e assim eu tenho 28 (a BOM de dois bytes mais dois bytes para cada caractere). XMLHttpRequest. response com arraybuffer responseType é suportado em HTML 5. cordas JavaScript são UTF-16 pode parecer uma afirmação estranha Arent eles só Unicode Não, uma string JavaScript é uma série de UTF-16-unidades código pares substitutos como duas JavaScript indivíduo Personagens mesmo que, na verdade, o par de substituto como um todo é apenas um personagem. Consulte o link para obter detalhes. DigitalFresh: A seqüência de caracteres é os dados binários. Como você estava comentando, eu postei um exemplo que pode ajudar. O JavaScript não tem um tipo quotbinaryquot e assim eles foram com um String com a garantia de que nenhum caractere armazenado na string estaria fora do intervalo 0..255. (Eles poderiam ter ido com uma matriz de números em vez disso, mas eles didn39t.) O exemplo mostra como obter o valor bruto de um quotcharacterquot da seqüência de caracteres. Ndash T. J. Porque este material é assíncrono, ele não pode lançar exceções que você precisa olhar para a interface para ver se há alguma forma assíncrona que relata erros. E, de fato, FileReader tem onerror para isso. Quando você usa um arquivo: 4747 URL, seu domínio de documento é nulo, o que tende a fechar você fora de um monte de coisas (eu don39t saber os detalhes, eu nunca fazê-lo), esp. Quando o SOP entra nela. I39m com certeza ele é até o navegador, pelo menos por enquanto, como a parte de segurança da especificação ainda é provisória: w3.orgTRFileAPIsecurity-discussão Mas eu wouldn39t esperar que ele funcione. Ndash T. J. Muitos agradecimentos TJCrowder - Eu deletei o meu comentário para evitar que outros se deixem enganar por minha simplificação excessiva, e obrigado por postar os detalhes - Tenho certeza de que outros acharão seus comentários muito mais úteis (e lendo o Artigo é realmente uma boa idéia, como você diz, se um é mucking ao redor nesta área). Como parte de uma série de artigos que eu estou discutindo alguns dos desafios que eu enfrentei ao tentar construir um HTML5 e JavaScript livre online ícones editor. Eu queria que os usuários fossem capazes de abrir e editar arquivos de ícones existentes no meu editor de ícones. Como os arquivos de ícones podem conter vários quadros, eu precisava acessar esses quadros individuais para que eles pudessem ser exibidos e disponíveis para edição para o usuário. O número, tamanho e localização dos quadros contidos em um ícone são todos armazenados no cabeçalho do ícone. O cabeçalho do ícone é um bytes de coleção localizado no início de um arquivo de ícone, então eu precisava ler os dados binários contidos no arquivo. Agora podemos ler arquivos facilmente no navegador sem precisar enviar nenhum dado de volta para um servidor. Nesta edição eu mostro como você pode ler dados binários de um arquivo local no navegador usando a API de Arquivo HTML5. Para começar, estávamos indo para adicionar um elemento de entrada e definir o atributo de tipo para o arquivo, em seguida, em um bloco de script que vamos lidar com o arquivo de entradas evento onchange. lt corpo gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160160160160 lt tipo id entrada quotbrowseOpenquot quotfilequot gt 160160160160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput document. getElementById (quotbrowseOpenquot) 160160160160160160160160 função fileInput. onchange () 160160160160160160160160160160160160 código para lidar com onchange evento vai aqui 160160160160 160160160160 160160160160 lt gt roteiro gt corpo lt Agora precisamos adicionar o código para lidar com o evento onchange. Aqui vamos criar um objeto FileReader. Usaremos o método readAsBinaryString do objeto FileReader que nos dará os dados binários brutos. Podemos passar um objeto File para o readAsBinaryString se quisermos ler o arquivo inteiro ou podemos passar um objeto Blob se apenas quisermos ler uma determinada seção de um arquivo. Neste exemplo, vamos passar um objeto File para ler o arquivo inteiro. Nós também precisamos lidar com o evento onloadend do FileReader como os dados que lemos com readAsBinaryString só está disponível para usar uma vez que o arquivo inteiro ou blob foi lido pelo FileReader. Nosso código no manipulador de eventos onchange agora se parece com isso. 160160160160160160160160 var fr nova FileReader () 160160160160160160160160 função fr. onloadend () 160160160160160160160160160160160160 código para lidar com onloadend evento 160160160160 160160160160 160160160160160160160160 fr. readAsBinaryString (este. files 0) No manipulador de eventos onloadend podemos acessar os dados que acaba de ser lido através do FileReaders Atributo de resultado. Podemos então loop através do atributo de resultado e chamar o método charCodeAt para retornar um valor inteiro de cada byte. Neste exemplo, estou indo para converter o byte para uma representação de seqüência hexadecimal usando toString (16), construir uma seqüência de caracteres longa e exibir a seqüência de caracteres para o usuário. Aqui está o exemplo completo de trabalho. lt DOCTYPE HTML cabeça gt lt html gt lt gt título 160160160160 lt gtReading dados binários com a API de arquivos e JavaScriptlt título gt cabeça lt gt lt gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 corpo 160160160160 lt tipo id entrada quotbrowseOpenquot quotfilequot gt 160160160160 lt script type quottextjavascriptquot gt 160160160160160160160160 var FileInput document. getElementById (quotbrowseOpenquot) 160160160160160160160160 função fileInput. onchange () 160160160160160160160160160160160160 var fr FileReader novo () 160160160160160160160160160160160160 função fr. onloadend () 160160160160160160160160160160160160160160160160 var resultado este. result 160160160160160160160160160160160160160160160160 var hex quotquot 160160160160160160160160160160160160160160160160 para (var i 0 i lt esta. result. length i) 160160160160160160160160160160160160160160160160160160160160 Var byteStr result. charCodeAt (i).toString (16) 160160160160160160160160160160160 160160160160160160160160160 se (byteStr. length lt 2) 160160160160160160160160160160160160160160160160160160160160160160160160 byteStr quot0quot byteStr 160160160160160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160160160160160 hex quot quot byteStr 160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160 alerta (hex) 160160160160160160160160160160160160 160160160160160160160160160160160160 fr. readAsBinaryString (este. files 0) 160160160160160160160160 160160160160 lt gt corpo do script gt lt lt html gtjDataView fornece um padrão Maneira de ler arquivos binários em todos os navegadores. Ele segue a Especificação DataView e até mesmo o estende para um uso mais prático. Explicação Existem três maneiras de ler um arquivo binário a partir do navegador. O primeiro é baixar o arquivo através de XHR com charsetx-user-defined. Você obtém o arquivo como um String. E você tem que reescrever todas as funções de decodificação (getUint16, getFloat32.). Todos os navegadores suportam isso. Em seguida, os navegadores que implementaram o WebGL também adicionaram ArrayBuffers. É um buffer simples que pode ser lido com vistas chamado TypedArrays (Int32Array, Float64Array.). Você pode usá-los para decodificar o arquivo, mas isso não é muito útil. Tem grande desvantagem, não pode ler dados não-alinhados. Ele é suportado pelo Firefox 4 e Chrome 7. Uma nova revisão da especificação adicionada DataViews. É uma visão em torno de seu buffer que pode ler tipos de dados arbitrários diretamente através de funções: getUint32, getFloat64. Somente o Chrome 9 é compatível. JDataView fornece a DataView API para todos os navegadores usando a melhor opção disponível entre Strings, TypedArrays e DataViews. Consulte a especificação para obter uma API detalhada. Khronos. orgregistrywebgldocspecTypedArray-spec. html6. Qualquer código escrito para DataView funcionará com jDataView (exceto se ele escreve algo). Construtor novo jDataView (buffer, offset, length). Buffer pode ser uma String ou uma ArrayBuffer Specification API O wrapper satisfaz todos os getters de especificação. GetInt8 (byteOffset) getInt16 (byteOffset, littleEndian) getInt32 (byteOffset, littleEndian) getInt32 (byteOffset, littleEndian) getUt32 (byteOffset, littleEndian) getFoat32 (byteOffset, littleEndian) Agora opcional. Se você omitir, ele será lido logo após o último deslocamento de leitura. Você pode interagir com o ponteiro interno com essas duas funções. Seek (byteOffset): Move o ponteiro interno para a posição tell (): Retorna a posição atual Adição de utilitários getChar e getString. Adição de createBuffer, um utilitário para criar facilmente buffers com o último tipo de armazenamento disponível (String ou ArrayBuffer). Falhas Somente a API de leitura está sendo enviada, o jDataView não fornece nenhum método definido. A implementação Float64 em strings não tem precisão total. Primeiro precisamos de um arquivo. Ou você obtê-lo através XHR ou usar o utilitário createBuffer.

No comments:

Post a Comment