brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
694 stars 530 forks source link

30% php conversion #16

Closed krazyjakee closed 12 years ago

krazyjakee commented 12 years ago

Needs a keener eye then mine, and then some testing.

brinley commented 12 years ago

Hey Daniel, can you have a look at this merge if you get a chance?

dvdotsenko commented 12 years ago

I see tests are part of the package, which is awesome.

We have a guy at work who does PHP. I will kick it to him. He has his plate full now. Should be done with review in a couple of days.

@krazyjakee If you are doing this for Willow Systems merchant, let me know the Merchant ID. The priority on review will jump to "immediate"

krazyjakee commented 12 years ago

Make note that a lot of the code is not converted because honestly I can't see how I could do it in php, but maybe someone with more experience could. It really is just a skeleton with some functions converted and the unknowns commented out.

I am mainly seeking to convert from base30 to bitmap so if it's just those parts you could help with I would appreciate it.

I am not with willow systems so I understand if there is not a rush.

dvdotsenko commented 12 years ago

Pending full, "pure" PHP solution, here are some pointers for getting from base30 to some sort of PNG quickly:

In all cases, getting from base30 to bitmap is a three-step process:

  1. Unpack base30 into raw vector pairs arrays
  2. Convert the vectors into some format that your renderer will take
  3. Feed "some format" renderer

In case of .Net solution the steps are:

  1. pure .Net code - Unpack base30 into int[][][](triple-deep array, custom format)
  2. pure .Net code - Turn int[][][] into SVG (.Net code applies complex curve smoothing logic)
  3. pure .Net (3rd party) lib - feed SVG to svglib and get Bitmap

In case of PHP, a "similar" solution would be:

  1. pure PHP code - Unpack base30 into some vectors array structure
  2. pure PHP code - Turn "some vectors array structure" into SVG (applying smoothing would be nice)
  3. PHP call to imagick (3rd party) lib - feed SVG to imagemagic over "imagick" PHP API.

3 above is easy. #1 above is somewhat easy. #2 above is very complex because of smoothing logic and white-space-trimming logic (that requires Stats class to find limits to the image data).

In light of a great deal of coding to get #2 and #1 solid, could I offer alternatives?

If you like getting "base30" to server, and rendering speed is not an issue, load data into PhantomJS on the server, use import base30 into jSignature, export svg, put SVG into separate PhantomJS window and scrape it. You get your PNG in one step.

If you cannot run PhantomJS on your server, but it has ImageMagic / GraphicsMagic and you have execute rights, just:

  1. (forget about base30 and) get SVG from jSignature to start with. Send it to server.
  2. On server, when needed, run gm.exe convert signature.svg -scale 200x200 -render signature.png and just use / serve the PNG by path.

If the situation is like above, but you cannot execute commands from PHP, but can have 'imagick' do step #2 immediately above but against PHP's imagick extension like so http://stackoverflow.com/a/4809562/366864

If your server does not allow imagic, calls to system (to GraphicsMagic or ImageMagic) or install of PhantomJS, either:

  1. Get "image" from jSignature to start with, or
  2. Change hosting provider, as this one is clearly too limiting for you.
krazyjakee commented 12 years ago

I'm a little confused, have I misread the issue entirely? I didn't know jsignature could pass the full png data as I was only using the example on the jsignature website.

It seems if you want to go from jsignature to a png file on the server with php, you merely have to do this... client

$('#signature').jSignature("getData");

server

$signature = base64_decode(str_replace("data:image/png;base64,","",$_POST['signature']));
file_put_contents('test.png',$signature);

Am I missing something?

dvdotsenko commented 12 years ago

@krazyjakee

Re: "Am I missing something?"

See "Data Import / Export (and Plugins)" and "Choosing the export / storage format" chapters here: http://willowsystems.github.com/jSignature/#/about/ for the parts that are missing :)

Summary: if you can handle vector (base30 or SVG) on the server, please, use vector. If not, and you understand the issues of that, use bitmap export.

dvdotsenko commented 12 years ago

The port from .Net examples was a bit convoluted (because .Net is convoluted) It was easier to start from scratch and use JavaScript base30-to-Native, Native-to-SVG code as example.

See 'tests' folder for usage. There is an example of rendering SVG to PNG there (last test).

I do NOT recommend this PHP NativeToSVG renderer if you need very high quality SVG. The vectors are converted into simple lines. The curve-smoothing logic that is in JavaScript or in .Net versions of NativeToSVG converters is NOT present in this PHP version.

In other words, this NativeToSVG renderer produces less pretty signatures than the alternatives, but is functional otherwise.

dvdotsenko commented 12 years ago

By the way. Test file is in PHPUnit format.