我可以在基于PHP的网站上使用npm安装Fabric.js吗？

Question

I am currently working on a project with two other people. We need to create a small site that allows you to upload a photo and then enter custom text on top of it as an overlay.

According to my research, Fabric.js does exactly what we're looking for. However, the main site and certain features (such as photo upload) have already been built in PHP because that is one of the primary skill sets of another person, and I can only find Node.js methods (npm or bower) of installing Fabric.js. I'm already familiar with Node.js and have npm installed, but is it compatible with PHP if I create separate .js files and link to them in index.php ? If not, what are my alternatives (in JavaScript or jQuery preferably, but i'm open to other options)?

Answer 1

So, you won't be able to directly call an npm module from PHP. That said, you can always run a small node program from PHP as a simple shell command, but I wouldn't recommend that.

I would recommend including fabric.js on the client side and not using node.js at all. Simply let the user overlay text on it in his or her browser, then upload the image.

PHP only runs on the server, so you can use it to serve any browser side js code you need to get the job done, but it won't interpret javascript code for you an execute it.

Answer 2

How to Run FabricJS

FabricJS can be run in two methods - client side or server side.

On the client side it is a simple Javscript file you need to load into a webpage. This way you can create a GUI which a user can manipulate the images and save the image as you'd like. Thats what the examples on the FabricJS website are doing.

On the client side, FabricJS needs to run on a NodeJS server. You can find some basic instructions on the FabricJS website for how to run it within NodeJS.

Pros / Cons

There are pros / cons for each method.

A client side setup in my mind is easier to program in (though I am a web developer by trade) and allows you to build a GUI which creates an easy interface for your users to use. However, there are limitations that the browser and clients computer can run into. For example, if you are rendering high resolution images it can have some limitations, particularly if you want to send the image to the server. Mobile devices have issues with higher resolution images.

A server side setup takes away most of the limitations, but takes away any GUI option. But it's really not that bad to work in. The biggest thing to remember that threw me off at first, is if you make any changes to your NodeJS code you need to restart your NodeJS server before they take effect. But if you're familiar with NodeJS that's nothing new.

Server Setup

With that background said, your question is how can you run FabricJS on a PHP server. As stated just above, FabricJS needs NodeJS to run. You could simply install NodeJS on your PHP server. Under this configuration, you now will have two webservers running at the same domain name/IP address. For that reason, one of the two will need a different port. Example:

http://www.myPHPserver.com (Apache/Nginx on port 80)

http://www.myPHPserver.com:8080 (NodeJS on port 8080 or any open port)

Alternatively, you could choose to install NodeJS with FabricJS on a different server and avoid the port conflict. Example:

http://www.myPHPserver.com (Apache/Nginx on port 80)

http://www.myNodeJSserver.com (NodeJS on port 80)

Cross Origin Scripting

If you are using a webserver to work with your FabricJS script, you will run into cross-origin scripting issues that you'll need to handle. This will happen under both server configuration examples provided above because the port or domain name results in a cross-origin setup. But this can be overcome by doing the following:

• Server
  • Set the access-control-allow-origin header on images.
• Browser/client
  • Set the crossOrigin attribute of the image to Anonymous

You can read more about how to do this from this article - Fabric JS Tainted Canvas – Cross-Origin Images .

Another method for working with cross-origin images is to use a server proxy as described here .

Installing FabricJS on NodeJS

If you need help installing FabricJS on NodeJS, here are some installation guides.

Install FabricJS on Debian Squeeze 6.0.10

Install FabricJS on Ubuntu 12.04 precise

Run PHP Script from NodeJS

It doesn't sound like this is needed based on your question, but I figured I'd mention it at least. If you need to call a PHP script from a NodeJS server it can be done with an exec command.

NodeJS Server

var runner = require("child_process");

var phpScriptPath = "path/to/your/php/script.php";
var argsString = "value1,value2,value3";
runner.exec("php " + phpScriptPath + " " +argsString, function(err, phpResponse, stderr) {
if(err) console.log(err); /* log error */
  console.log( phpResponse );
});

PHP Script

<?php
$params = explode(",", $argv[1]);
echo $params[0] ." - " . $params[1] . " - " . $params[2];
?>

Call PHP script from NodeJS