使用html5和javascript在图像上生成网格

我有一张4000像素乘3000像素的图像。我想在html页面上显示此图像，并允许用户在该图像上选择坐标

事实上，我必须从中复制： 请注册并查看此元素。报名是免费的

实际上，我想以700x500px div大小显示这个4000x300px图片，但是用户应该能够选择图片中相对于其实际大小的坐标，即4000x300px

简单的像素缩放方法的问题在于，用户只能从缩小的像素中选择坐标。我希望用户能够选择4000*3000的坐标

如何将大尺寸图像固定到该尺寸，并像上面一样制作放大工具？使用html5画布有可能吗

如果你能分享任何jquery插件，我将非常感激

---

也许像这样，你也可以用它来计算与原始大小的比率，只需做乘法

var element=document.getElementByIdbox； element.onmousemove=function{ var x=e.pageX-this.offsetLeft； 变量y=e.pageY-this.offsetTop； showx，y； } 函数showx，y{ coords.innerHTML=+x+，+y+； } 盒子{ 边框：2件纯黑； 背景：浅蓝色； 宽度：200px； 高度：150像素； 光标：十字线； 背景图片：url'http://lorempixel.com/200/150/'; } 身体{ 利润率：10px； } 坐标X，Y 25%大小的图像：

带放大部分的图像放大部分为100%大小

下面是当用户将鼠标放在所需的放大点上时放大图像的代码

代码使用第二个覆盖画布来呈现放大的全尺寸图像的一部分

示例代码和演示：

此起始示例使用固定大小的放大视口，但您可以调整以允许用户使用mousedown+mouseup定义可变大小的视口

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； 函数重偏移{ var BB=canvas.getBoundingClientRect； offsetX=BB.left； offsetY=BB.top； } var offsetX，offsetY； 再抵消； window.onscroll=function{reOffset；} window.onresize=function{reOffset；} var magifier=document.getElementById放大镜； var mctx=放大镜.getContext2d； var$magnifier=$'magnifier'； var-mw=100； var mh=100； var下限=0.25； var上限=1/下限； var-iw，ih； var img=新图像； img.onload=启动； img.src=https://dl.dropboxusercontent.com/u/139992952/multple/soccer.jpg; 功能启动{ 放大 iw=img.宽度； ih=img.高度； cw=画布。宽度=iw*缩小比例； ch=画布。高度=ih*缩小比例； ctx.drawImageimg，0,0，cw，ch； $canvas.mousedown函数{handleMouseDowne；}； $canvas，放大镜.mouseupffunction{handleMouseUpe；}； } 函数放大倍数x，y{ if！x{$magnifier.css{left:-999}；return；}； $magnifier.css{左：x-mw/2，上：y-mh/2}； mctx.clearRect0,0，mw，mh； mctx.drawImageimg，-x*高标度+mw/2，-y*高标度+mh/2； } 功能手柄{ //告诉浏览器我们正在处理此事件 e、 防止违约； e、 停止传播； var x=parseInte.clientX-offsetX； var y=parseInte.clientY-offsetY； 放大倍数，y； } 功能手柄{ //告诉浏览器我们正在处理此事件 e、 防止违约； e、 停止传播； 放大 } 正文{背景色：象牙；} 容器{位置：相对；} 画布{位置：绝对；边框：1px纯红色；} 放大镜{位置：绝对；边框：3倍纯蓝色；} 按住鼠标可放大视图。

---

我不打算注册。。。使用截图或尝试更好地解释查看此截图为什么不将图像嵌入到您的问题中，上传工具已经在那里了。我只是为你做的，没那么难。问题是图像大小是4000x3000像素，所以如果我嵌入它，那么图像将不适合屏幕。@faizi你仍然可以单击它使其变大。谢谢！你们已经完成了一半的部分，但现在主要的是我想得到放大部分中心的坐标，坐标应该和原始图像的大小有关4000x3000pixels@faizi不客气！用户选择的viewbox：要让用户选择视口大小，只需在mousedown和mouseup上记录鼠标位置。这两个点定义了视口的左上角和左下角。您可以使用我的答案中的算法缩放用户选择的viewbox的放大率。与原始大小相关的缩放：代码已经这样做了！要调整小尺寸和放大尺寸，只需将缩小和放大变量更改为25%以外的值。现在轮到你做最后一点编码了。：-祝您的项目好运。@faizi关于小图像和放大图像之间的坐标关系当用户在小图像上的[x，y]上单击鼠标时，用户正在放大图像上选择[x*高比例，y*高比例]

---

图像放大图像==完整的4000x3000px图像。您的方法的问题是用户只能从缩小的像素中选择坐标。我希望用户能够从4000*3000中选择一个坐标。只要跟踪缩放因子，就可以向用户显示任意缩放大小的视口。