...

View Full Version : Combining a series of images into one larger image?



Vattic
12-30-2011, 12:52 AM
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.

jmrker
12-30-2011, 01:12 AM
Where are the images you are trying to splice together?

Vattic
12-30-2011, 01:15 AM
All the images will be on the page or stored in folders along side the .html documents.

Sorry; I should have been clearer.

jmrker
12-30-2011, 02:50 AM
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.

Vattic
12-30-2011, 03:15 AM
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.

jmrker
12-30-2011, 04:28 AM
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.


<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>

jmrker
12-30-2011, 04:42 AM
Another SWAG.


<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>

Vattic
12-30-2011, 04:51 AM
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):

<?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.

jmrker
12-30-2011, 05:17 AM
There is no way to save any file type
using JS ONLY that I know of
on any browser using the Internet.

xelawho
12-30-2011, 05:28 AM
can I have a SWAG?



<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>

Vattic
12-30-2011, 11:10 AM
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 (http://www.nihilogic.dk/labs/canvas2image/).

Thanks go to you all for your efforts.

rnd me
12-30-2011, 10:39 PM
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.

jmrker
12-31-2011, 02:07 AM
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.



<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>

Vattic
12-31-2011, 10:31 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum