使用javascript在画布中创建缩略图

我刚开始使用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);
    };

//在xml数据库中搜索图像
for（var p=0；p”；
var src=xmlDoc.firstChild.childNodes[p].textContent；
//用图像填充数组
arrim.push（src）；
}
}
}
}
}
}
//调整大小并绘制图像
调整画布大小（arrimm.长度）；
对于（变量i=0；ictx.canvas.width）
{
y=y+310；
x=0；
}
img.width=300；
img.高度=300；
ctx.drawImage（img，x，y，img.width，img.height）；/（0,0）
x=x+310；
};
img.src=src；
}
//函数根据找到的图像数调整画布大小
函数大小调整画布（nImages）
{
变量高度=（nImages/4）；
ctx.canvas.height=数学圆（高度）*310；
警报（ctx.canvas.height）；
};

---

提前感谢。

因为画布是被动的，不知道画的是什么，所以您基本上需要跟踪图像缩略图以及在哪里画的

这使您能够在画布上单击时检查图像的区域，然后显示正在单击的图像

更新：

例如-要跟踪图像，请执行以下操作：

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

}

var-imageRegions=[]；//保存图像区域的新数组
对于（i；i

现在，单击画布时，您可以使用区域检查阵列，以找到坐标所在的区域并显示该图像：

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

canvas.onclick=函数（e）{
///将坐标调整为相对于画布
var rect=canvas.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top，
i=0，r；
对于（；r=图像区域[i]；i++）{
///有赢家吗？
如果（x>r.x&&xr.y&&y

因为画布是被动的，不知道画的是什么，所以基本上需要跟踪图像缩略图以及在哪里画的

这使您能够在画布上单击时检查图像的区域，然后显示正在单击的图像

更新：

例如-要跟踪图像，请执行以下操作：

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

}

var-imageRegions=[]；//保存图像区域的新数组
对于（i；i

现在，单击画布时，您可以使用区域检查阵列，以找到坐标所在的区域并显示该图像：

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

canvas.onclick=函数（e）{
///将坐标调整为相对于画布
var rect=canvas.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top，
i=0，r；
对于（；r=图像区域[i]；i++）{
///有赢家吗？
如果（x>r.x&&xr.y&&y

这似乎是对的，但当我检查imageRegions数组中的值时，尝试存储区域时，一切都结束了undefined@Cap.Alvez我用一个演示更新了我的答案，以显示这是可行的。在哪里（在什么范围内）定义imageRegions？我已经解决了“未定义”的问题。我将值存储在错误的位置。但是现在我正在存储正确的值（我已经检查过了），问题是当我尝试检查值时，当我在画布上单击时，如果（x>r.x&&xx=（e.clientX | | e.offsetX）-rect.left；我这样做了，