Node.JS Image Resize

How it works

1. Upload image to the server.
2. Image is resized when it is stored on the server.

Jump to Complete Example

Image Upload

The Server Upload section describes the steps to upload an image to a server. Resizing images in the editor only changes the size displayed in the browser. Changing the physical size of an image occurs on the server side.

Resize Image

The editor's Node.JS SDK uses the Node.JS GraphicsMagick library resize method to resize images before storing them on disk. You can use all the options available for it.

Copy

var options = {
  resize: [300, 300]
}

FroalaEditor.Image.upload(req, '/uploads/', options, function(err, data) { ... });

Complete Example

Copy

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageUploadURL: '/image_upload',

    imageUploadParams: {
      id: 'my_editor'
    }
  })
</script>

Copy

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var path = require('path');
var fs = require('fs');
var FroalaEditor = require('PATH_TO_FROALA_SDK/lib/froalaEditor.js');

app.use(express.static(__dirname + '/'));
app.use('/bower_components',  express.static(path.join(__dirname, '../bower_components')));
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/upload_image_resize', function (req, res) {
  var options = {
    resize: [300, 300]
  }

  FroalaEditor.Image.upload(req, '/uploads/', options, function(err, data) {
    if (err) {
      return res.send(JSON.stringify(err));
    }
    res.send(data);
  });
});