search

willowsystems / jSignature

jQuery plugin - draw signature in browser.
720 stars 266 forks source link

Drawing on top of an image #112

Closed vespino closed 10 months ago

vespino commented 10 months ago

I would like to use this project for drawing on top of an image, setData should make this possible? Does anyone have an example? It would be nice if the image and signature/strokes are exported together, but not required since I can combine the two using PHP if necessary.

If the signature canvas could be transparant (instead of have a white background) so an image could be shown in the background, I would already be helped.

vespino commented 10 months ago

By adding some CSS I was able to achieve my goal:

.jSignature { background:url('image.jpg'); }

My backend merges the 2 images:

//create tmp file
$fp=fopen('tmp_file.png', 'w+');
$fw=fwrite($fp, base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', 'data:'.$_POST['jSignature'][0].','.$_POST['jSignature'][1])));

$bg=imagecreatefromjpeg('image.jpg');
$fg=imagecreatefrompng('tmp_file.png');

imagecopy($bg, $fg, 0, 0, 0, 0, 600, 800); //change the last 2 values to the width and height of the desired output
imagepng($bg, 'result.png');

unlink('tmp_file.png');

Hopes this helps someone in the future.