javascript - 使用javascript在 Canvas 中创建缩略图

我刚开始使用javascript，并尝试编写图像搜索库代码。我正在通过xml数据库文件获取图像的来源。

我有一个for循环，穿过图像的来源，然后在画布上绘制每个图像。但是，我想做的就是单击图像，然后在另一个窗口中显示真实尺寸的图像。

我该怎么做（最好仅使用javascript）？

这是代码的一部分：

 //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);
    };

提前致谢。

最佳答案

由于画布是被动的，并且不知道绘制在画布上的内容是什么，因此您基本上需要跟踪图像缩略图及其绘制位置。

这使您可以在单击画布时检查图像的区域，然后可以显示被单击的图像。

更新：ONLINE DEMO HERE

例如-跟踪图像：

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});

}

现在，当您单击画布时，您可以检查带有区域的数组，以找到坐标所在的数组并显示该图像：

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