错误TypeError：fs.​​createWriteStream不是函数Angular 6 GIF导出

Question

I have created the following function to create GIF and I want to export it to a .gif image.

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++;  
}

Then I have a button to export this canvas content to a GIF file.

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

Error:

ERROR TypeError: fs.createWriteStream is not a function

Where am I going wrong? Any help would be apppreciated. I am using this tutorial

Answer 1

Actually that will run on server side. Browser don't have fs . So you gotta use some other library which is supported by browser.

That said, here's a client side JS answer.

Using

Using BrowserFS.configure(), you can easily configure BrowserFS to use a variety of file system types.

Here's a simple usage example using the LocalStorage-backed file system:

<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>

Can easily use like this:

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());
  });
});