Cool idea. It would be great if this could edit vector images

http://en.wikipedia.org/wiki/List_of_vector_graphics_editors - there are a bunch of open source vector graphic editors available

Comments

duozersk’s picture

It should be an online service with an API to access it and get results back... maybe Google Docs Drawing will get this job done, I will check on it.

duozersk’s picture

Version: » 6.x-1.x-dev

I will be releasing Aviary Raven support in the next few days (along with other editors from Aviary).

AndyB

rodrigoaguilera’s picture

wow this module is getting fast releases.
Are all the image editors available propietary?

would be nice the implementation of SVG-edit
http://code.google.com/p/svg-edit/

but i suppose only for creating new images and saving them as png

nice work!!

duozersk’s picture

Yep, it's getting hot :) The goal is to have the module for images like WYSIWYG is for text fields :)

As for the SVG and other vector formats - I'm not really sure about the approach to take on this as Drupal doesn't really recognize vector graphics as images (only jpg, gif and png).

For the integration with SVG Edit - I will check on it, hopefully sooner than later.

All the current editors are proprietary (Aviary wants to release Aviary Feather as open source, but it didn't happen yet) - they are just services on the web with the API used to communicate with them.

Thanks
AndyB

marcoka’s picture

hatsch’s picture

i think svg-edit would be a great enhancement. it's the best open source online "image" editor i know. it also supports exporting to png which could be a helper on systems that don't support svg yet.

duozersk’s picture

OK, will do SVG-edit next, just tried it out - looks like it should be easy to add.

Thanks
AndyB

gberm’s picture

Any update on when you think SVG edit will be able to save back to drupal? Would love to use this on my site.

duozersk’s picture

StatusFileSize
new4.78 KB

Well, it actually already saves - you can see it on the demo at d7.andrewberezovsky.ru (Drupal 7 only for now).
The only issue is that there is no way to get the original image into there (to edit it) - so only new images can be created.

To get it working you need to put the attached file (remove the .txt) into sites/all/libraries/svgedit/extensions and then use the "Export as PNG" option.

AndyB

digitalfrontiersmedia’s picture

Issue summary: View changes
StatusFileSize
new5.09 KB
new856 bytes

I had put together a project proposal 4 years ago based on this integration. The client only recently came back ready to build this site. However, I never read the fine print that the module didn't load or save the SVG images back. So I gave this a couple of days of thought and got it working loading the original image into the editor and saving it back to Drupal as an SVG. Caveat is that I'm using simple File fields limited to .svg file types and displaying them as images (which works very well). So I don't know if this works with any WYSIWYG inserted images.

For loading the original image, I changed some of the beginning lines of the above ext-imageeditor.js.txt file from:

                var urldata = $.deparam.querystring(true);
                var save_svg_action = urldata.saveurl;
                var save_png_action = urldata.saveurl;

                // Create upload target (hidden iframe)

to:

                var urldata = $.deparam.querystring(true);
                var save_svg_action = urldata.saveurl;
                var save_png_action = urldata.saveurl;

                // *** Digital Frontiers Media load initial image patch ***
                $.get(urldata.image, function(svg) {
                  svgCanvas.clear();
                  svgCanvas.setSvgString(svg);
                  svgEditor.updateCanvas();
                }, 'text');
                // *** end patch ***

                // Create upload target (hidden iframe)

Replacement file attached.

And I got SVG image save back to Drupal working by changing lines 42-46 of plugins/editor/svgedit/svgedit.inc from:

  if (isset($_POST['output_png'])) {
    $destination = $directory . '/' . md5($_POST['output_png']) . '.png';
    $file = file_unmanaged_save_data(base64_decode(substr($_POST['output_png'], 22)), $destination);
    $image = file_create_url($file);
  }

to:

  if (isset($_POST['output_png'])) {
    $destination = $directory . '/' . md5($_POST['output_png']) . '.png';
    $file = file_unmanaged_save_data(base64_decode(substr($_POST['output_png'], 22)), $destination);
    $image = file_create_url($file);
  } else if (isset($_POST['output_svg'])) {
    $destination = $directory . '/' . md5($_POST['output_svg']) . '.svg';
    $file = file_unmanaged_save_data(urldecode($_POST['output_svg']), $destination);
    $image = file_create_url($file);
  }

Patch attached.

digitalfrontiersmedia’s picture

Status: Active » Needs review

If this is even still a need, can someone review this and commit or clean-up these changes?

digitalfrontiersmedia’s picture

Version: 6.x-1.x-dev » 7.x-1.x-dev

Updating this to the D7 branch since the problem exists there as well and is the basis of the fix I presented in comment #10 above.

digitalfrontiersmedia’s picture

I actually ended up using a much simpler method than what I previously listed for loading an image into the editor--the method described in the SVG Edit documentation:

  svgEditor.loadFromURL(urldata.image + '?' + new Date().getTime());

rtfm, right?

  • duozersk committed b8667e3 on 7.x-1.x
    Issue #1065230 - added ext-imageeditor.js for SVGEdit editor
    
duozersk’s picture

Status: Needs review » Needs work

Stephen,

Thank you for using the module and for the patch.

I have committed your changes. We might also need some README for how to setup SVGEdit editor...

Thanks
AndyB

duozersk’s picture

Title: Vector Graphics Editor » Vector Graphics Editor - SVG-Edit
duozersk’s picture

Component: Code » Documentation
digitalfrontiersmedia’s picture

I'll look at my notes and compare against what is already available and will add suggested text if I have time. Thanks for maintaining such a brilliant integration. It's quite clever how it was engineered to handle so many different editors.