creating thumbnail images in canvas using javascript

Question

I just started with javascript and I'm trying to code an image search gallery. I'm getting the source of the images by a xml database file.

I have a for loop that goes trough the sources of the images, and then I draw each images on canvas. But what I wanna do is when I click on the images I wanna show the real sized image in another window.

How do I do that (preferably only using javascript)?

Heres the part of the code:

 //goes trough the xml database searching for the image
 for ( var p = 0 ; p < xmlDoc.firstChild.childNodes.length ; p ++ )
                        {
                            if ( xmlDoc.firstChild.childNodes[p].nodeName == 'path' )
                            {

                                document.getElementById("results_ID").innerHTML += xmlDoc.firstChild.childNodes[p].textContent+"<br />";

                                var src = xmlDoc.firstChild.childNodes[p].textContent;

                                //fill the array with the images
                                arrImg.push(src);

                            }
                        }
                    }
                }
            }
        }
        //resize and draw the images founded
        resizeCanvas(arrImg.length);
        for(var i = 0; i < arrImg.length; i++)
        {
            drawImg(arrImg[i]);

        }
    }
    //function do draw the images    
    function drawImg(src)
    {
        var img = new Image();
        img.onload = function ()
        {

            if (x > ctx.canvas.width)
            {
                y = y + 310;
                x = 0;
            }

            img.width = 300;
            img.height = 300;

            ctx.drawImage(img, x, y, img.width, img.height); //(0,0)
            x = x + 310;
        };
        img.src = src;
    }

    //function to resize the canvas by the number of images found
    function resizeCanvas(nImages)
    {
        var height = (nImages/4);
        ctx.canvas.height = Math.round(height) * 310;
        alert(ctx.canvas.height);
    };

Thanks in advance.

score 1 · Accepted Answer · 2013-09-04 21:22:33Z

1

As canvas is passive and doesn't know what is drawn to it you will basically need to keep track of the image thumbnails and where you have drawn them.

This enables you to check for the image's region when you do a click on the canvas and can then present the image being clicked.

Update: ONLINE DEMO HERE

For example - to keep track of images:

var imageRegions = [];  /// new array that holds the image regions

for(i; i < count; i++) {

    /// load image and get its position and dimension on canvas
    ctx.drawImage(img, x, y, img.width, img.height); //(0,0)
    x = x + 310;

    /// store the region:
    imageRegions.push({image: img,
                       x:x, y:y, width:img.width, height:img.height});

}

Now when you click the canvas you can check your array with regions to find the one the coordinates are within and present that image:

canvas.onclick = function(e) {

    /// adjust coordinates to be relative to canvas
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, r;

    for(; r = imageRegions[i]; i++) {

        /// got a winner?
        if (x > r.x && x < r.x + r.width &&
            y > r.y && y < r.y + r.height) {

            presentImage(r.image);   /// dummy function, present image
            return;
        }
    }
}

edited Sep 4, 2013 at 21:22

answered Sep 4, 2013 at 4:47

user1693593

Sign up to request clarification or add additional context in comments.

5 Comments

Cap.Alvez Over a year ago

it's seems right, but when I try to store the region when I check the values inside the imageRegions array it's all undefined

user1693593 Over a year ago

@Cap.Alvez I updated my answer with a demo to show this working. Where (in what scope) do you define the imageRegions?

Cap.Alvez Over a year ago

I already solved the "undifined" problem. I was storing values in the wrong place. But now I am storing the right values (I already checked) the problem is that when I try to check the values when I click on the canvas in the if (x > r.x && x < r.x + r.width etc...) are wrong and when I try opening the image is almost always the same image. I dont know why cuz Im doing almost the exact way as you..

user1693593 Over a year ago

@Cap.Alvez did you convert the mouse coordinates when storing? iS this with IE? The original X/Y in the event is relative to window so they must be converted so they are relative to canvas. Also check in console that x and y is not NaN and that clientX/Y is not undefined (in case you can use offsetX/Y like this x = (e.clientX || e.offsetX) - rect.left;

Cap.Alvez Over a year ago

I did it, It was a problem that I was having with the onload function and I was drawing the images in the wrong scope of the code.

Collectives™ on Stack Overflow

creating thumbnail images in canvas using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related