search

willowsystems / jSignature

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

How to draw signature on image instead of plain canvas? #46

Open 5ajish opened 10 years ago

5ajish commented 10 years ago

Hi guys!!

I have successfully loaded an image on existing canvas. I could draw signature on it. I can also generate base64 string of final image. (Image with default loaded jpeg/png image on canvas + signature drawn over it.) But when I resize my browser or click reset, the loaded image get disappears. Can we prevent this?

It would be grateful, if anyone could help me out.

brinley commented 10 years ago

How are you loading the existing image?

5ajish commented 10 years ago

Hi brinley,

This is my code to load image on canvas.

var canvas = document.querySelector('#signature canvas') context = canvas.getContext('2d');

var erase_image = new Image(); erase_image.src = 'yee.jpg'; erase_image.onload = function() { context.drawImage(erase_image, 0, 0, canvas.width,canvas.height); } erase_image.setAttribute('crossOrigin','anonymous');

I need to make it work on windows app so it works well on IE 10, but google chrome blocks it as Cross-Origin Resource Sharing policy.

brinley commented 10 years ago

If your image is fixed, you can convert the image to a data url and use jSignature's setData to import it into the signature.

5ajish commented 10 years ago

Yes, I did it and I got base 64 but when I resize or press reset button the background image disappears. I think canvas is being reloaded. Can we prevent this?

I reloaded image on canvas on browser resize but signature gets behind the image since I reloaded the image again. Any ideas?