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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Combining a series of images into one larger image?

    I would like to take a series of images and paste them into a final larger image before displaying it to the user. From what I've read there are libraries that use HTMLcanvas that could achieve this but they don't work even with newer versions of IE.

    I was wondering if there were functions similar to the PHP image editing functions that work with newer versions of IE?

    Cheers.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Where are the images you are trying to splice together?

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All the images will be on the page or stored in folders along side the .html documents.

    Sorry; I should have been clearer.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by Vattic View Post
    All the images will be on the page or stored in folders along side the .html documents.

    Sorry; I should have been clearer.
    Well, if you want some help stitching them together from me,
    I'll need a link to the images to at least make the attempt.

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm still in the planning stages so I haven't got them stored anywhere at the minute. I'll upload some place holder images for you.

    Ideally the final image should be 512x512 with a transparent background. Each of the images lined up from the top left.

    http://dl.dropbox.com/u/14508972/splice/01.png
    http://dl.dropbox.com/u/14508972/splice/02.png
    http://dl.dropbox.com/u/14508972/splice/03.png
    http://dl.dropbox.com/u/14508972/splice/04.png
    http://dl.dropbox.com/u/14508972/splice/05.png

    Cheers for your help.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    You sure don't give much in the way of requirements for this project.
    Here is a simple script that, as far as I can tell, satisfies your current request.
    Code:
    <html>
    <head>
    <title>Image Splicer</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=247425
    
    var baseURL = '';
    var imgList = ['01.png','02.png','03.png','04.png','05.png'];
    
    window.onload = function() {
      var IDS;
      for (var i=0; i<imgList.length; i++) {
    	IDS = 'img'+i;
    	document.getElementById(IDS).src = baseURL+imgList[i];
      }
    }
    </script>
    </head>
    <body>
    <div id="imgArea">
    <img id="img0" src=''><br>
    <img id="img1" src=''><br>
    <img id="img2" src=''><br>
    <img id="img3" src=''><br>
    <img id="img4" src=''><br>
    </div>
    </body>
    </html>

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Another SWAG.
    Code:
    <html>
    <head>
    <title>Image Splicer</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=247425
    
    var baseURL = '';
    var imgList = ['01.png','02.png','03.png','04.png','05.png'];
    
    function randomizeDisplay() {
      var sel = document.getElementById('imgArea').getElementsByTagName('img');
      for (var i=0; i<sel.length; i++) {
    //	sel[i].src = baseURL+imgList[i % 5]; // one display method
    // another display
    	var N = Math.floor(Math.random()*imgList.length);
    	sel[i].src = baseURL+imgList[N];
      }
    }
    window.onload = function() {
      randomizeDisplay();
    }
    </script>
    </head>
    <body>
    <div id="imgArea">
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <p>
    <button onclick="randomizeDisplay()">Randomize</button>
    </div>
    </body>
    </html>

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you again for your help but I must not have explained properly.

    I need to turn these:
    http://dl.dropbox.com/u/14508972/splice/01.png
    http://dl.dropbox.com/u/14508972/splice/02.png
    http://dl.dropbox.com/u/14508972/splice/03.png
    http://dl.dropbox.com/u/14508972/splice/04.png
    http://dl.dropbox.com/u/14508972/splice/05.png

    Into something like this:
    http://dl.dropbox.com/u/14508972/splice/final.png

    Using PHP I'd do something like this (It's been a long time):
    Code:
    <?php
    $dest = imagecreatetruecolor(512, 512);
    
    for ($i = 1; $i <= 5; $i++) {
        $src = imagecreatefrompng($i.'.png');
        $xSpacing = $i*32-32;
        imagecopy($dest, $src, $xSpacing, 0, 0, 0, 32, 32);
    }
    ?>
    Basically I need to know if it's possible to create a new empty image and then copy and paste other images into it? I know it's possible but the methods I know of don't work for IE users.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts
    There is no way to save any file type
    using JS ONLY that I know of
    on any browser using the Internet.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    can I have a SWAG?

    Code:
    <html>
    <head>
    <style>
    .pics{ 
    float:left;	
    	}
    </style>
    </head>
    <body>
    <div id="thediv"></div>
    <script type="text/javascript">
    
    for (var e=1; e<6; e++) {
    document.getElementById("thediv").innerHTML+="<img src='http://dl.dropbox.com/u/14508972/splice/0"+e+".png' class='pics'/>"
            }
    
    </script> 
    </body>
    </html>

  • #11
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It sounds like JS can't do what I'd like. I've read some more into the non-IE method and it looks like even that will be less useful than I'd hoped. For those who wondered what it was: canvas2image.

    Thanks go to you all for your efforts.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    you can simply line up the images using css if your goal is "displaying it to the user".
    you don't need to mess with canvas, which btw DOES work in IE9.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,086
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Vattic View Post
    Thank you again for your help but I must not have explained properly.

    I need to turn these:
    ...
    Into something like this:
    http://dl.dropbox.com/u/14508972/splice/final.png

    ...
    Take out the <br> to make them align horizontally.

    Code:
    <div id="imgArea">
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>
    <img src=''><img src=''><img src=''><img src=''><img src=''><br>

  • #14
    New to the CF scene
    Join Date
    Dec 2011
    Location
    UK
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    you can simply line up the images using css if your goal is "displaying it to the user".
    you don't need to mess with canvas, which btw DOES work in IE9.
    My goal would be to have the user then save the whole image. I already knew how to have them display like has been suggested.

    It seems I have been misinformed about canvas and IE.

    I think I'm going to be using PHP for this now.

    Thanks again everybody.


  •  

    Posting Permissions

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