Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Turn a div into an image

    Im not sure if this is possible/if its a php question, or javascript, or something completely different, but im wondering if i could turn a div into an image what i could then manipulate.

    Ideally i want it to work something like
    1) Link is pressed
    2) div (#page) is turned into an image
    3) Javascript does some things to the image e.g. shrink, rotate, skew etc

    Is anything like this remotely possible?

  • #2
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    Kind of, but it's not really that easy. First, JavaScript doesn't have the ability to "screenshot" an element on the page and turn it into an image. You would have to do this with some plugin or else send the contents of the div to your server and have a script determine what it's supposed to look like. You could then store the image on your server and send it back to the browser. PHP, for example, can generate images using the GD library.

    Once you have an image, you can do some stuff with JS and CSS. Resizing an image fairly easily...just set the height and width attributes. You can also use CSS to apply some basic transforms to an image, though it's not going to be cross-browser. Here's a neat page on using webkit-transform.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    I found html2canvas which gets a image, however currently itt just loads it directly into the body of the page, so i need to go through it and try and manipulate it a bit, however theres 2k+ lines of code so it might take me a while haha

  • #4
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    You can do some neat things with the new canvas element, just remember that older browsers don't have native support for this.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Ooh, ill look into that thanks . It's not important if older browsers don't support it it's just for some cool transitions for changing pages


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •