javascript - Getting the native resolution of an image fails -
i'm trying implement magnifier comparing 2 images. apparently need know native resolution of images common approach creating new image object, setting src , querying width , height property fails. returning 0.
i tried nativewidth , nativeheight.
i've prepared jsfiddle: http://jsfiddle.net/b6kz8xjf/6/
here source code used in jsfiddle, relevant part starts right after
this.setposition = function(x,y) {
html:
... <div style="width:100%; height:100%;"> <div id="magnifiedimage" style="float:left; margin:20px; width:200px; height: 300px;"> </div> <div id="magnifiedimage2" style="float:left; margin:20px; width:200px; height: 300px;"> </div> </div> ... javascript jquery:
var magnifier = function(elem) { var self = this; var imageurl = "http://placehold.it/400x600"; // configure parent member fields //---------------------------------------------- // setup layout elem.magnifiercontainer = $("<div>").css({ "position" : "relative", "cursor" : "none" }); elem.magnifier = $("<div>").css({ "position" : "absolute", "height" : "11em", "width" : "11em", "border-radius" : "50%", "box-shadow" : "3px 3px 5px #111", "background" : 'url(' + imageurl + ') no-repeat', "display" : "none" }); elem.smallimage = $("<img>").attr({ "src" : imageurl }).css({ "width" : "100%", "height" : "100%", "max-width" : "400px", "max-height" : "600px", }); $(elem.magnifiercontainer).append(elem.smallimage, elem.magnifier); $(elem).append(elem.magnifiercontainer); // magnifier // ---------------------------------- this.elemparent = elem; this.syncedmagnifier = null; // synchronizes magnifier (propagating actions amagnifier) this.syncwith = function(amagnifier) { if (!(amagnifier instanceof magnifier)) { return; } this.syncedmagnifier = amagnifier; amagnifier.syncedmagnifier = this; }; // sets position of magnifier relative parent this.setposition = function(x, y) { // native image resolution var nativeimage = new image(); nativeimage.src = $(elem.smallimage).attr("src"); var nativewidth = nativeimage.width; var nativeheight = nativeimage.height; console.log(nativeimage.width); //alert(nativeimage.src + ": " + nativewidth + " / " + nativeheight); // calculate magnifier position , background-image offset var imagewidth = $(elem.smallimage).width(); var imagewidth_2 = imagewidth / 2; var imageheight = $(elem.smallimage).height(); var imageheight_2 = imageheight / 2; var magnifierimageposx = math.round(imagewidth_2 - x / imagewidth * nativewidth * 2); var magnifierimageposy = math.round(imageheight_2 - y / imageheight * nativeheight * 2); $(elem.magnifier).css({ "left" : x - elem.magnifier.width()/2, "top" : y - elem.magnifier.height()/2, "backgroundposition" : magnifierimageposx + "px " + magnifierimageposy + "px" }); }; // sets visibility of magnifier this.setvisible = function(bvisible) { if (bvisible) { $(this.elemparent.magnifier).fadein("fast"); } else { $(this.elemparent.magnifier).fadeout("fast"); } } // parent functionality //----------------------------------------------- // add event listening elem.addeventlistener("mousemove", function(event) { var cursorx = event.pagex - $(self.elemparent).offset().left; var cursory = event.pagey - $(self.elemparent).offset().top; // check visibility if ((cursorx > 0 && cursorx < $(self.elemparent.smallimage).width()) && (cursory > 0 && cursory < $(self.elemparent.smallimage).height())) { self.setvisible(true); if (self.syncedmagnifier != null) { self.syncedmagnifier.setvisible(true); } } else { self.setvisible(false); if (self.syncedmagnifier != null) { self.syncedmagnifier.setvisible(false); } } // set position self.setposition(cursorx, cursory); if (self.syncedmagnifier != null) { self.syncedmagnifier.setposition(cursorx, cursory); } }); }; var magnifier1 = new magnifier(document.getelementbyid("magnifiedimage")); var magnifier2 = new magnifier(document.getelementbyid("magnifiedimage2")); magnifier1.syncwith(magnifier2); edit: tried image (not placehold.it) , worked!? wonder why doesn't work placehold.it image?
Comments
Post a Comment