Custom Image as Background Image

  • Resolved calvinseng

    (@calvinseng)


    7 years, 8 months ago

    Hi,

    Saw your respond a year ago about using custom image but I can’t seem to understand or get it working.

    I tried to following accordingly by creating a JS as following,

    <script type="text/javascript">

window.onresize = drawSignatureBackground;
$( document ).ready( function() {
	$("#wpcf7_BodyParts_signature").on("mouseup", function(){
		drawSignatureBackground();
	});
} );

function drawSignatureBackground() {
   var canvas = document.getElementById("canvasID");
   var ctx=canvas.getContext("2d");
   var image = new Image();
    image.onload = function() {
     ctx.drawImage(image, 0, 0);
   }
   image.src = 'https://domain.com/wp-content/uploads/2017/07/body_parts-1.jpg';
}

</script>

    The javascript is showing in the signature page but not replacing the white background.

    Hope you would be able to assist me out.
    Thanks much in advance!

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

    (@tameroski)

    Hi !

    The code seams Ok to me, as long as the canvas ID exists and the image URL is pointing to a real image.

    I made the test myself, and it’s working fine. Maybe remove the mouseup event listener part : unless it’s intended it’s useless.

    Thread Starter calvinseng

    (@calvinseng)

    Thank you so so much man!

    <script type="text/javascript">

window.onload = drawSignatureBackground;
$( document ).ready( function() {
	$("#bodyparts").onload( function(){
		drawSignatureBackground();
	});
} );

function drawSignatureBackground() {
   var canvas = document.getElementById("bodyparts");
   var ctx=canvas.getContext("2d");
   var image = new Image();
    image.onload = function() {
     ctx.drawImage(image, 0, 0);
   }
   image.src = 'https://your-domain.com/wp-content/uploads/2017/07/body_parts-1.jpg';
}

</script>

    This is the final script. For whoever requires the picture to show onload.

    I missed filling up the canvas ID within the function.

    • This reply was modified 7 years, 8 months ago by calvinseng.
    • This reply was modified 7 years, 8 months ago by calvinseng.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Image as Background Image’ is closed to new replies.