使用html5和javascript在图像上建立网格

Question

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

实际上，我必须从这个复制：ion=GB&cid=2ca08b9b-4717-474c-b5ec-1e6a40df6d54&play=1

(请注册并查看此元素。免费注册)

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

缩放像素的简单方法的问题是，用户只能从缩小的像素中选择坐标。我希望用户能够从4000*3000种可能性中选择一个坐标。

我怎样才能将一个大尺寸的图像固定到这个尺寸中，并使放大工具就像上面的那个一样？是否可以使用html5画布？

如果您可以为此共享任何jquery插件，那么我将非常感激。

​

​

Answer 1

25%大小的图像：

​

​

放大截面的图像(放大截面尺寸为100% )

​

​

当用户将鼠标按在他们想要的放大点上时，这里的代码可以放大图像。

代码使用第二个覆盖画布来显示放大(全尺寸)图像的一部分。

示例代码和演示：

这个开始的示例使用一个固定大小的放大视图端口，但是您可以进行调整，让用户使用mousedown+mouseup来定义可变大小的视图。

​

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var magifier=document.getElementById("magnifier");
var mctx=magnifier.getContext("2d");

var $magnifier=$('#magnifier');
var mw=100;
var mh=100;
var downscale=0.25;
var upscale=1/downscale;
var iw,ih;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/soccer.jpg";
function start(){
  magnify();
  iw=img.width;
  ih=img.height;
  cw=canvas.width=iw*downscale;
  ch=canvas.height=ih*downscale;
  ctx.drawImage(img,0,0,cw,ch);
  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas,#magnifier").mouseup(function(e){handleMouseUp(e);});
}

function magnify(x,y){
  if(!x){$magnifier.css({left:-999}); return;};
  $magnifier.css({left:x-mw/2,top:y-mh/2});
  mctx.clearRect(0,0,mw,mh);
  mctx.drawImage(img,-(x)*upscale+mw/2,-(y)*upscale+mh/2);
}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  var x=parseInt(e.clientX-offsetX);
  var y=parseInt(e.clientY-offsetY);

  magnify(x,y);
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  magnify();
}

body{ background-color: ivory; }
#container{position:relative;}
#canvas{position:absolute;border:1px solid red;}
#magnifier{position:absolute;border:3px solid blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hold mouse down for magnified view.</h4>
<div id=container>
  <canvas id="canvas" width=300 height=300></canvas>
  <canvas id="magnifier" width=100 height=100></canvas>
</div>

​

Answer 2

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

​

var element = document.getElementById("box");
element.onmousemove = function(e) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;

  show(x, y);
}

function show(x, y) {
  coords.innerHTML = "(" + x + "," + y + ")";
}

#box {
  border: 2px solid black;
  background: lightblue;
  width: 200px;
  height: 150px;
  cursor: crosshair;
  
  background-image: url('http://lorempixel.com/200/150/');
}
body {
  margin: 10px;
}

Coords <span id="coords">(X,Y)</span>
<div id="box"></div>

​