使用html5和javascript

Question

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

实际上我必须从中复制： https://www.botb.com/CompetitionPlay.aspx?SiteID=1&region=GB&cid=2ca08b9b-4717-474c-b5ec-1e6a40df6d54&play=1
（请注册并查看此元素。可以自由注册）

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

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

如何将大尺寸图像修复为该尺寸，并使放大工具与上述相同？是否可以使用html5画布？

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

Answer 1

图片尺寸为25％：

放大部分的图像（放大部分为100％尺寸）

当用户将鼠标按住所需放大点时，此代码放大图像。

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

示例代码和演示：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许是这样的，你也可以用它来计算原始尺寸的比例，只做乘法。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;