Support » Plugin: Contact Form 7 Signature Addon » Image as background of signature png

  • Resolved kcc24


    Hi there,

    We’ve come up with another problem in our project and hope to get help as fast as last time.

    We’d like to have an image as background for the signature field so users can paint on it (e.g. a watermark of our company), instead of the default white background.
    We already thought about achieving this with simply putting a background-image in the CSS style of the signature field, but this approach won’t save the background with the actual painted signature in the final png (it just saves the painted signature).

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author tameroski


    Well, the only way i think you can achieve this is by drawing the image directly onto the canvas using the drawImage function just after the signature field is loaded. Im not able to to show you how right now (because im not near any computer atm) but i might try in a few days if needed. Good luck !

    Plugin Author tameroski


    Ok, i quickly tried this and it kinda works :

    var canvas = document.getElementById("canvasID");
    var ctx=canvas.getContext("2d");
    var image = new Image();
    image.onload = function() {
         ctx.drawImage(image, 0, 0);
    image.src = '';

    You’ll have to do this on load but also when clear button is pressed. And also on resize. With a few improvement (like hiding the canvas until the image is loaded into it, etc.), it should be OK 😉

    Hi again,

    thanks for the tip so far! I managed it by adding this code right after the sigFieldInit call:

    bg_img.onload = function(){
       var cnvs = document.getElementById("wpcf7_my_signature");
       var ctx = cnvs.getContext("2d");
       ctx.drawImage(bg_img, 0, 0, 280, 505);

    Looks fine, but when the user clicks “Clear” it clears the background too. Adding same code in the sigFieldClear function did not work out.

    EDIT: Looks like our latest answers intersected. 🙂
    Can you tell me where exactly to add this to fix the clear/resize issue?

    Plugin Author tameroski



    Sorry, i’m a bit late on that one.

    Well, as i said, you have to draw your image on init (seams OK), on clear and on resize.

    Let’s make a function that draw the image on the canvas and let’s call it “drawSignatureBackground()”.

    Then in your theme’s javascript file, if you are using jQuery, you should add something like this :

    window.onresize = drawSignatureBackground;
    $( document ).ready( function() {
    	$("#YOUR-CLEAR-INPUT-ID").on("mouseup", function(){
    } );

    I’m not sure the resize call is required, as i don’t clear the field on resize anymore (i did in older versions of the plugin). I only tested the “clear” call …

    Let me know if it did the trick 😉

    That works and is much prettier than my first solution. Thanks again, your help is very appreciated!

    Plugin Author tameroski


    Glad to hear it !
    If you don’t mind, take some time to rate the plugin if you can, i’d really like to get rid of the first bad reviews i had when i first released a crappy version of this plugin 😛
    Thanks for using it anyway.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image as background of signature png’ is closed to new replies.