thread-pond / signature-pad

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.
BSD 3-Clause "New" or "Revised" License
727 stars 292 forks source link

Location Signatura on the Image? #99

Closed murilobsd closed 10 years ago

murilobsd commented 10 years ago

Hi,

When downloading the signature, how could get the location of the signature on the background image?

Sincerely, murilo ijanc'

thomasjbradley commented 10 years ago

The output from getSignature() includes pixel based coordinates for every point on the line. Is that what you’re looking for?

murilobsd commented 10 years ago

More or less I was not clear with my question!

I was wanting to put the signature on the background image, and generate a single image with the background image and signature.

Researched some sites and I have to do something like this:

var myCanvas = document.querySelector('myCanvas'),
img = document.createElement('img'),
ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;

myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
img.onload = function () {  
    ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
};

img.src = 'image.png';

thomasjbradley commented 10 years ago

Yep, that's how you'd do it. Calling the drawImage() method directly on the <canvas> would work. The only problem I can think of is that clearing the canvas will also clear your background image.

murilobsd commented 10 years ago

Thomas, sorry for the delay in responding, thank you for your attention!!!