ОШИБКА TypeError: fs.createWriteStream не является функцией Angular 6 GIF export

Question

Я создал следующую функцию для создания GIF и хочу экспортировать ее в изображение .gif.

import * as gifEncoder from 'gif-encoder';

animate() {
    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');
    var gif = gifEncoder;
    gif = new gifEncoder(10, 10);

    if (this.numberOfFrames < this.points.length - 1) {
        requestAnimationFrame(() => this.animate());
    }
    else {
        console.log("Program End Reached...");
        gif.finish();
        this.gif = gif;
    }

    context.beginPath();
    var fromX = this.points[this.numberOfFrames - 1].x;
    var fromY = this.points[this.numberOfFrames - 1].y;
    var toX = this.points[this.numberOfFrames].x;
    var toY = this.points[this.numberOfFrames].y;
    context.lineWidth = 5;
    context.strokeStyle = "red";
    context.moveTo(fromX, fromY);
    context.lineTo(toX, toY);
    context.stroke();
    gif.writeHeader();
    gif.addFrame(context);

    this.numberOfFrames++;  
}

Затем у меня есть кнопка для экспорта этого содержимого холста в файл GIF.

downloadAsGIF() {
    let fs = require('fs');
    var file = fs.createWriteStream('img.gif');
    this.gif.pipe(file);
}

Ошибка:

ERROR TypeError: fs.createWriteStream is not a function

Где я иду не так?Любая помощь будет признательна.Я использую этот учебник

Answer 1

На самом деле это будет работать на стороне сервера. Браузер не имеет fs. Таким образом, вы должны использовать другую библиотеку, которая поддерживается браузером.

Тем не менее, вот клиентская сторона JS ответ.

Использование

Используя BrowserFS.configure (), вы можете легко настроить BrowserFS для использования различные типы файловых систем.

Вот простой пример использования файла с поддержкой LocalStorage Система:

<script type="text/javascript" src="browserfs.min.js"></script>
<script type="text/javascript">
  // Installs globals onto window:
  // * Buffer
  // * require (monkey-patches if already defined)
  // * process
  // You can pass in an arbitrary object if you do not wish to pollute
  // the global namespace.
  BrowserFS.install(window);
  // Configures BrowserFS to use the LocalStorage file system.
  BrowserFS.configure({
    fs: "LocalStorage"
  }, function(e) {
    if (e) {
      // An error happened!
      throw e;
    }
    // Otherwise, BrowserFS is ready-to-use!
  });
</script>

Можно легко использовать так:

var fs = require('fs');
fs.writeFile('/test.txt', 'Cool, I can do this in the browser!', function(err) {
  fs.readFile('/test.txt', function(err, contents) {
    console.log(contents.toString());
  });
});