Adding a Browser-based Image Editor to ICEcoder

These instructions require the ICEcoder Docker install (http://lastmilesynergy.com/?q=node/49) to have already been completed.

Download SVG-edit from https://code.google.com/p/svg-edit/ and place it in a folder.

In that same folder, 

$ touch Dockerfile

and fill it with the following instructions:

# ICEcoder-SVGEdit Server
# Version 0.1
FROM icecoder:latest
MAINTAINER Last Mile Synergy, LLC
 
ADD ./svg-edit-2.6.zip /opt/svg-edit.zip
 
RUN unzip /opt/svg-edit.zip -d /var/www/
RUN chmod -R 777 /var/www/svg-edit 
 
CMD ["/usr/sbin/apache2", "-D", "FOREGROUND"]
 
Then, create the Docker image and fire up a container:
 
$ docker build -rm -t icecoder-svgedit .
$ docker run -d -p 127.0.0.1:80:80 icecoder-svgedit
 
Now, log into ICEcoder and copy the file svg-edit/svg-editor.html to svg-edit/index.html.  Edit the file to add:
 

<script type="text/javascript" src="extensions/ext-server_opensave.js"></script>
 
after the text: "<!-- you can load extensions here -->".

 
Then, within the file svg-edit/svg-editor.js, add 'ext-server_opensave.js' to the extensions array within the curConfig hash:
 

curConfig = {
canvasName: 'default',
canvas_expansion: 3,
dimensions: [640,480],
initFill: {
color: 'FF0000',  // solid red
opacity: 1
},
initStroke: {
width: 5,
color: '000000',  // solid black
opacity: 1
},
initOpacity: 1,
imgPath: 'images/',
langPath: 'locale/',
extPath: 'extensions/',
jGraduatePath: 'jgraduate/images/',
extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js','ext-grid.js','ext-server_opensave.js'],
initTool: 'select',
wireframe: false,
colorPickerCSS: null,
gridSnapping: false,
gridColor: "#000",
baseUnit: 'px',
snappingStep: 10,
showRulers: true
},
 

Now, you should be able to go to http://localhost/svg-edit and begin editing SVG and PNG images.