我有4000像素×3000像素的图像。我想在html页面上显示此图像,并允许用户选择此图像上的坐标。
实际上我必须从中复制:
https://www.botb.com/CompetitionPlay.aspx?SiteID=1®ion=GB&cid=2ca08b9b-4717-474c-b5ec-1e6a40df6d54&play=1
(请注册并查看此元素。可以自由注册)
实际上我想以700x500px div尺寸显示这个4000x3000px图片,但是用户应该能够选择图片中相对于其实际尺寸的坐标,即4000x3000px。
缩放像素的简单方法的问题是用户只能从缩小的像素中选择坐标。我希望用户能够从4000 * 3000种可能性中选择一个坐标
如何将大尺寸图像修复为该尺寸,并使放大工具与上述相同?是否可以使用html5画布?
如果您可以共享任何jquery插件,那么我将非常感激。
答案 0 :(得分: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>
&#13;
答案 1 :(得分:0)
也许是这样的,你也可以用它来计算原始尺寸的比例,只做乘法。
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;