我是javascript的菜鸟，所以任何人都可以帮助我，当我放大图像时，如果鼠标从该图像中移出，它将返回其原始大小，我们如何通过“ imageviewer2.js”中给出的resize方法来做到这一点”。 图像被放大了百万倍，但是当鼠标光标离开图像div时，它不会返回其原始大小，这是我们可以通过resize方法实现的方式。
我做了那个mouseout方法，但是那是一个拼凑而成，所以我想使用resize方法，但是我不明白如何从resize方法中做到这一点。
/*
* imgViewer2
*
*
* Copyright (c) 2013 Wayne Mogg
* Licensed under the MIT license.
*/
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
/*
* imgViewer2 plugin starts here
*/
;(function($) {
$.widget("wgm.imgViewer2", {
options: {
zoomStep: 0.5,
zoomMax: undefined,
zoomable: true,
dragable: true,
onClick: $.noop,
onReady: $.noop
},
_create: function() {
var self = this;
if (!$(this.element).is("img")) {
var elem = this.element.children()[0];
if (!$(elem).is("img")) {
$.error('imgviewer plugin can only be applied to img elements');
} else {
self.img = self.element.children()[0];
}
} else {
self.img = self.element[0];
}
// the original img element
var $img = $(self.img);
/*
* a copy of the original image to be positioned over it and manipulated to
* provide zoom and pan
*/
self.view = $("<div class='viewport' />").uniqueId().appendTo($img.parent());
var $view = $(self.view);
self.map = {};
self.bounds = {};
// a flag used to check the target image has loaded
self.ready = false;
self.resize = false;
$img.one("load",function() {
// get and some geometry information about the image
self.ready = true;
var width = $img.width(),
height = $img.height(),
offset = $img.position();
// cache the image padding information
self.offsetPadding = {
top: parseInt($img.css('padding-top'),10),
left: parseInt($img.css('padding-left'),10),
right: parseInt($img.css('padding-right'),10),
bottom: parseInt($img.css('padding-bottom'),10)
};
/*
* cache the image margin/border size information
* because of IE8 limitations left and right borders are assumed to be the same width
* and likewise top and bottom borders
*/
self.offsetBorder = {
x: Math.round(($img.outerWidth()-$img.innerWidth())/2),
y: Math.round(($img.outerHeight()-$img.innerHeight())/2)
};
/*
* define the css style for the view container using absolute positioning to
* put it directly over the original image
*/
var vTop = offset.top + self.offsetBorder.y + self.offsetPadding.top,
vLeft = offset.left + self.offsetBorder.x + self.offsetPadding.left;
$view.css({
position: "absolute",
overflow: "hidden",
top: vTop+"px",
left: vLeft+"px",
width: width+"px",
height: height+"px"
});
// add the leaflet map
self.bounds = L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth));
self.map = L.map($view.attr('id'), {crs:L.CRS.Simple,
minZoom: -10,
trackresize: false,
maxBoundsViscosity: 1.0,
attributionControl: false,
inertia: false,
zoomSnap: 0,
wheelPxPerZoomLevel: Math.round(36/self.options.zoomStep),
zoomDelta: self.options.zoomStep
});
self.zimg = L.imageOverlay(self.img.src, self.bounds).addTo(self.map);
self.map.options.minZoom = self.map.getBoundsZoom(self.bounds,false);
self.map.fitBounds(self.bounds);
self.bounds = self.map.getBounds();
self.map.setMaxBounds(self.bounds);
if (self.options.zoomMax !== null) {
var lzoom = self.leafletZoom(self.options.zoomMax);
if (lzoom < self.map.getZoom()) {
self.map.setZoom(lzoom);
}
self.map.options.maxZoom = lzoom;
}
if (!self.options.dragable) {
self.map.dragging.disable();
}
if (!self.options.zoomable) {
self.map.zoomControl.disable();
self.map.boxZoom.disable();
self.map.touchZoom.disable();
self.map.doubleClickZoom.disable();
self.map.scrollWheelZoom.disable();
}
self.map.on('click', function(ev) {
if (self.options.onClick !== null) {
self.options.onClick.call(self, ev.originalEvent, self.eventToImg(ev));
}
});
self.map.on('zoomend', function() {
if (self.options.zoomMax >= 1 && this.getZoom() > this.options.zoomMax) {
this.setZoom(this.options.zoomMax);
}
if (!self.resize) {
self.bounds = self.map.getBounds();
}
});
self.map.on('moveend', function() {
if (!self.resize) {
self.bounds = self.map.getBounds();
}
});
self.map.on('resize', function() {
self.map.options.minZoom = -10;
self.map.fitBounds(self.bounds,{animate:false});
self.map.options.minZoom = self.map.getBoundsZoom(L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth)),true);
self.map.options.maxZoom = self.leafletZoom(self.options.zoomMax);
waitForFinalEvent(function(){
self.resize = false;
self._view_resize();
self.map.options.minZoom = -10;
self.map.fitBounds(self.bounds,{animate:false});
self.map.options.minZoom = self.map.getBoundsZoom(L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth)),true);
self.map.options.maxZoom = self.leafletZoom(self.options.zoomMax);
}, 300, $img[0].id);
});
self.options.onReady.call(self);
}).each(function() {
if (this.complete) { $(this).trigger("load"); }
});
/*
/*
* Window resize handler
*/
$(window).resize(function() {
if (self.ready) {
self.resize = true;
self._view_resize();
self.map.invalidateSize({animate: false});
}
});
},
/*
* View resize - the aim is to keep the view centered on the same location in the original image
*/
_view_resize: function() {
if (this.ready) {
var $view = $(this.view),
$img = $(this.img),
width = $img.width(),
height = $img.height(),
offset = $img.position(),
vTop = Math.round(offset.top + this.offsetBorder.y + this.offsetPadding.top),
vLeft = Math.round(offset.left + this.offsetBorder.x + this.offsetPadding.left);
$view.css({
top: vTop+"px",
left: vLeft+"px",
width: width+"px",
height: height+"px"
});
}
},
/*
* Remove the plugin
*/
destroy: function() {
$(window).unbind("resize");
this.map.remove();
$(this.view).remove();
$.Widget.prototype.destroy.call(this);
},
_setOption: function(key, value) {
switch(key) {
case 'zoomStep':
if (parseFloat(value) <= 0 || isNaN(parseFloat(value))) {
return;
}
break;
case 'zoomMax':
if (parseFloat(value) < 1 || isNaN(parseFloat(value))) {
return;
}
break;
}
var version = $.ui.version.split('.');
if (version[0] > 1 || version[1] > 8) {
this._super(key, value);
} else {
$.Widget.prototype._setOption.apply(this, arguments);
}
switch(key) {
case 'zoomStep':
if (this.ready) {
this.map.options.zoomDelta = this.options.zoomStep;
this.map.options.wheelPxPerZoomLevel = Math.round(60/this.options.zoomStep);
}
break;
case 'zoomMax':
if (this.ready) {
lzoom = this.leafletZoom(this.options.zoomMax);
if (lzoom < this.map.getZoom()) {
this.map.setZoom(lzoom);
}
this.map.options.maxZoom = lzoom;
this.map.fire('zoomend');
}
break;
case 'zoomable':
if (this.options.zoomable) {
this.map.zoomControl.enable();
this.map.boxZoom.enable();
this.map.touchZoom.enable();
this.map.doubleClickZoom.enable();
this.map.scrollWheelZoom.enable();
} else {
this.map.zoomControl.disable();
this.map.boxZoom.disable();
this.map.touchZoom.disable();
this.map.doubleClickZoom.disable();
this.map.scrollWheelZoom.disable();
}
break;
case 'dragable':
if (this.options.dragable) {
this.map.dragging.enable();
} else {
this.map.dragging.disable();
}
break;
}
},
/*
* Test if a relative image coordinate is visible in the current view
*/
isVisible: function(relx, rely) {
var view = this.getView();
if (view) {
return (relx >= view.left && relx <= view.right && rely >= view.top && rely <= view.bottom);
} else {
return false;
}
},
/*
* Convert a user supplied zoom to a Leaflet zoom
*/
leafletZoom: function(zoom) {
if (this.ready && zoom !== undefined) {
var img = this.img,
map = this.map,
lzoom = map.getZoom() || 0,
size = map.getSize(),
width = img.naturalWidth,
height = img.naturalHeight,
nw = L.latLng(height/zoom,width/zoom),
se = L.latLng(0,0),
boundsSize = map.project(nw, lzoom).subtract(map.project(se, lzoom));
var scale = Math.min(size.x / boundsSize.x, -size.y / boundsSize.y);
return map.getScaleZoom(scale, lzoom);
} else {
return undefined;
}
},
/*
* Get the Leaflet map object
*/
getMap: function() {
if (this.ready) {
return this.map;
}
else {
return null;
}
},
/*
* Get current zoom level
* Returned zoom will always be >=1
* a zoom of 1 means the entire image is just visible within the viewport
* a zoom of 2 means half the image is visible in the viewport etc
*/
getZoom: function() {
if (this.ready) {
var img = this.img,
map = this.map,
width = img.naturalWidth,
height = img.naturalHeight,
constraint = this.options.constraint,
bounds = map.getBounds();
if (constraint == 'width' ) {
return Math.max(1, width/(bounds.getEast()-bounds.getWest()));
} else if (constraint == 'height') {
return Math.max(1,height/(bounds.getNorth()-bounds.getSouth()));
} else {
return Math.max(1, (width/(bounds.getEast()-bounds.getWest()) + height/(bounds.getNorth()-bounds.getSouth()))/2);
}
} else {
return null;
}
},
/*
* Set the zoom level
* Zoom must be >=1
* a zoom of 1 means the entire image is just visible within the viewport
* a zoom of 2 means half the image is visible in the viewport etc
*/
setZoom: function( zoom ) {
if (this.ready) {
zoom = Math.max(1, zoom);
if (this.options.zoomMax === undefined) {
} else {
zoom = Math.min(zoom, this.options.zoomMax);
}
var img = this.img,
map = this.map,
width = img.naturalWidth,
height = img.naturalHeight,
constraint = this.options.constraint,
center = map.getCenter(),
bounds = map.getBounds();
var hvw, hvh;
if (constraint == 'width') {
hvw = width/zoom/2;
hvh = hvw * (bounds.getNorth()-bounds.getSouth())/(bounds.getEast()-bounds.getWest());
} else if (constraint == 'height') {
hvh = height/zoom/2;
hvw = hvh * (bounds.getEast()-bounds.getWest())/(bounds.getNorth()-bounds.getSouth());
} else {
hvw = width/zoom/2;
hvh = height/zoom/2;
}
var east = center.lng + hvw,
west = center.lng - hvw,
north = center.lat + hvh,
south = center.lat - hvh;
if (west<0) {
east += west;
west = 0;
} else if (east > width) {
west -= east-width;
east = width;
}
if (south<0) {
north += south;
south = 0;
} else if (north > height) {
south -= north-height;
north = height;
}
map.fitBounds(L.latLngBounds(L.latLng(south,west), L.latLng(north,east)),{animate:false});
}
return this;
},
/*
* Get relative image coordinates of current view
*/
getView: function() {
if (this.ready) {
var img = this.img,
width = img.naturalWidth,
height = img.naturalHeight,
bnds = this.map.getBounds();
return {
top: 1 - bnds.getNorth()/height,
left: bnds.getWest()/width,
bottom: 1 - bnds.getSouth()/height,
right: bnds.getEast()/width
};
} else {
return null;
}
},
/*
* Pan the view to be centred at the given relative image location
*/
panTo: function(relx, rely) {
if ( this.ready && relx >= 0 && relx <= 1 && rely >= 0 && rely <=1 ) {
var img = this.img,
map = this.map,
bounds = this.bounds,
// bounds = map.getBounds(),
east = bounds.getEast(),
west = bounds.getWest(),
north = bounds.getNorth(),
south = bounds.getSouth(),
centerX = (east+west)/2,
centerY = (north+south)/2,
width = img.naturalWidth,
height = img.naturalHeight,
newY = (1-rely)*height,
newX = relx*width;
east += newX - centerX;
west += newX - centerX;
north += newY - centerY;
south += newY - centerY;
if (west<0) {
east -= west;
west = 0;
}
if (east > width) {
west -= east-width;
east = width;
}
if (south<0) {
north -= south;
south = 0;
}
if (north > height) {
south -= north-height;
north = height;
}
map.fitBounds(L.latLngBounds(L.latLng(south,west), L.latLng(north,east)),{animate:false});
}
return this;
},
/*
* Return the relative image coordinate for a Leaflet event
*/
eventToImg: function(ev) {
if (this.ready) {
var img = this.img,
width = img.naturalWidth,
height = img.naturalHeight;
relx = ev.latlng.lng/width;
rely = 1 - ev.latlng.lat/height;
if (relx>=0 && relx<=1 && rely>=0 && rely<=1) {
return {x: relx, y: rely};
} else {
return null;
}
} else {
return null;
}
},
/*
* Convert relative image coordinate to Leaflet LatLng point
*/
relposToLatLng: function(x,y) {
if (this.ready) {
var img = this.img,
width = img.naturalWidth,
height = img.naturalHeight;
return L.latLng((1-y)*height, x*width);
} else {
return null;
}
},
/*
* Convert relative image coordinate to Image pixel
*/
relposToImage: function(pos) {
if (this.ready) {
var img = this.img,
width = img.naturalWidth,
height = img.naturalHeight;
return {x: Math.round(pos.x*width), y: Math.round(pos.y*height)};
} else {
return null;
}
}
});
})(jQuery);<!DOCTYPE html>
<html>
<head>
<title>imgViewer2 Plugin - custom onClick callback example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="screen">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/imgViewer2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; min-width: 320px;">
<tr>
<td style="padding: 10px">
<h1 align="center">imgViewer2 Plugin - custom onClick callback example</h1>
<div align="center">
<img id="image1" src="https://media.gettyimages.com/photos/laughing-black-man-wearing-backpack-near-purple-door-picture-id573064079" style="border: 30px solid #555; padding:20px;" width="80%" />
</div>
<p style="margin:10px 5% 10px 5%;text-align: justify;">
This example demonstrates the widget with a custom "onClick" callback. In this case clicking on the image will show the page pixel coordinates, image pixel coordinates and relative image coordinates (relative image coordinates range from 0,0 to 1,1 where 0,0 is the top-left corner and 1,1 is the bottom-right corner of the image) in a modal dialog.
</p>
<p style="margin:10px 5% 10px 5%;text-align: justify;">
Zoom in and out using the mousewheel, +/- controls, double click/tap or hold the shift key and drag out a rectangle. Left mouseclick and drag to pan. On touch enable devices pinch gestures can be used to zoom in and out and tap and drag to pan around.
</p>
<p style="margin:10px 5% 10px 5%;">Resize the window and try again</p>
</td>
</tr>
</table>
<script type="text/javascript">
;(function($) {
$(document).ready(function(){
var $img = $("#image1").imgViewer2({
onReady: function() {
$('.leaflet-grab').css('cursor','crosshair');
},
onClick: function( e, pos ) {
var $message = $("<div id='dialog-modal'></div>").dialog({
modal: true,
title: "You clicked at:",
open: function(ev, ui) {
$('.ui-dialog').css('z-index',2001);
$('.ui-widget-overlay').css('z-index',2000);
}
});
var imgpos = this.relposToImage(pos);
$message.html("Page X: " + e.pageX + "<br/>Page Y: " + e.pageY + "<br/>Image Pixel X: " + imgpos.x + "<br/>Image Pixel Y: " + imgpos.y + "<br/>Image Rel X: " + pos.x.toFixed(3) + "<br/>Image Rel Y: " + pos.y.toFixed(3));
}
});
});
})(jQuery);
</script>
</body>
</html>