Odczyt pliku w JavaScript i HTML5

javascript-html5-tutorial.pl

Wrzesień 23rd, 2014

Dominik-W

Z tym zagadnieniem spotykałem się właściwie od lat. Jednak dopiero bardziej nowoczesne rozwiązania pozwalają podejść do tego zagadnienia w sensowny sposób, niezwiązany z jedną konkretną przeglądarką.

Odczyt pliku w JavaScript i HTML5

Wśród najprostszych sposobów można wymienić wczytywanie zawartości pliku via AJAX; w przypadku jQuery można użyć metody get():

jQuery.get('test.txt', function(data) {
  alert(data);
  // process ...
  // $('#mydiv').html(data.replace('n', '<br />'));
});

Przykład on-line:

http://dominik-w.pl/tester_file_read.html

Należy pamiętać o ograniczeniach tego sposobu w dostępie do plików z lokalnego systemu plików, jak i kwestii Same-origin policy.

Idąc dalej.

Podczas różnych prac z HTML5 Canvas, spotkałem się z kodem takim jak przedstawiony poniżej, który działał tak jak należy, i to w różnych przeglądarkach (w ich nowych wersjach).

Przykład – odczyt pliku w JavaScript i wyświetlenie go na HTML5 Canvas

function loadImage() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var imgSrc = 
    'http://dominik-w.pl/direct-code-logo-company-200x.png';

  // add file:// if user specified local path
  if (imgSrc.indexOf("//") == -1 && imgSrc.indexOf(".") != 0) {
    imgSrc = "file:///" + imgSrc;
  }

  // load file into canvas and adjust params
  var img = new Image();
  img.onload = function() {
    width = img.width;
    height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0);

    // get image data
    try {
      imageData = ctx.getImageData(0, 0, width, height);
    } catch(e) {
      // !
      netscape.security.PrivilegeManager.
        enablePrivilege("UniversalBrowserRead");
      imageData = ctx.getImageData(0, 0, width, height);
    }
  }

  img.src = imgSrc;
}

Kod działa bardzo dobrze; obszar canvas dostosowuje się do rozmiarów obrazka.