Forgive my ignorance of javascript, but I'm trying to create a simple image hover that enlarges the image when you hover your mouse over it. (And no, I don't want to use JQuery. I want to learn this directly in javascript!) My problem is that only the width is specified in the html. The height is omitted so that the image displays proportionally on the page. When I hover over the image with my mouse, the javascript works fine in IE, but in FF, Chrome, Safari, etc. img.offsetHeight gets assigned 0 rather than a proportion of img.offsetWidth.
<script type="text/javascript">
var img=document.getElementById('imageid');
var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
var ratio=thisheight/thiswidth;
var bigwidth=600;
var bigheight=bigwidth*ratio;
function bigImg(x) {
x.style.width=bigwidth;
x.style.height=bigheight;
}
function normalImg(x) {
x.style.width=thiswidth;
x.style.height=thisheight;
}
</script>
<img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="myimage.jpg" alt="image" width="200" >
As you can see from the img tag, height is inferred proportional to width by not being specified. Can someone tell me how I can use javascript to derive thisheight from thiswidth?
this will work for you in all ie FF, Chrome, Safari, etc
<html>
<body>
<img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="C810623C.gif" alt="image" width="200" >
<script type="text/javascript">
var img = document.getElementById('imageid');
var normsizeimg = img.style.width;
var bigwidth = 600;
function bigImg(x)
{ x.style.width = bigwidth; }
function normalImg(x) { x.style.width = normsizeimg; }
</script>
</body>
</html>
this is why it's easier to do such things with jquery, some browsers keep dimension values in offsetWidth others don't;
here's a tip of how you can get across this problem
var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
//it's non IE browser
if(XMLHttpRequest){
var thisheight=img.clientHeight;
var thiswidth=img.clientWidth;
}
This works fine for me on Firefox (I don't have access to other browsers right now, sorry):
<img id="imageid" src="myimage.jpg" alt="image" width="200" >
<script type="text/javascript">
var img = document.getElementById('imageid');
img.onload = function(){
var thiswidth = img.offsetWidth;
var thisheight = img.offsetHeight;
var ratio = thisheight/thiswidth;
var bigwidth = 600;
var bigheight = bigwidth*ratio;
img.onmouseover = function bigImg() {
img.style.width = bigwidth;
img.style.height = bigheight;
}
img.onmouseout = function normalImg(x) {
img.style.width = thiswidth;
img.style.height = thisheight;
}
};
</script>
The main differences between this code and yours is that:
I'm only accessing the element after it is declared
I'm only accessing its properties after the image loads
I'm also only adding the onmouseover and onmouseout attributes later because it makes the HTML look cleaner, but that's optional.
Update: actually, adding the event handlers later isn't optional, because they use the calculated bigwidth and bigheight, which are only available after the image loads.
Related
I want to generate an image of the DOM element containing base64 images. For the same, I am converting the DOM element to SVG and then drawing that SVG on the canvas and obtaining base64 from it.
It is observed that HTML element having a smaller image is rendered properly, while that having larger image isn't rendered in the canvas in Edge.
Here is a snippet for the same:
<html>
<body>
<div id="content1">
<img id="smallImg" style="width: 200px; height: 150px;" src="data:image/jpeg;base64,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">
</div>
<div id="content2">
<img id="bigImg" src="data:image/jpeg;base64,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"
style="width: 300px; height: 200px" src="">
</div>
</body>
<script>
function htmlToXml(html) {
var doc = document.implementation.createHTMLDocument();
var text = html.innerHTML;
doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
doc.documentElement.innerHTML = text;
let htmls = (new XMLSerializer).serializeToString(doc.documentElement);
return htmls;
}
function getImage(element) {
var htmlElement = element;
var canvasElement = document.createElement('canvas');
canvasElement.height = 800;
canvasElement.width = 500;
var canvasContext = canvasElement.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="800" crossorigin="anonymous">' +
'<foreignObject width="500" height="800">' +
htmlToXml(htmlElement) +
'</foreignObject>' +
'</svg>';
var url = '';
var DOMURL = window.URL;
var svg = new Blob([data], {
type: 'image/svg+xml;charset=utf-8'
});
url = DOMURL.createObjectURL(svg);
var img = new Image();
img.setAttribute('width', '500');
img.setAttribute('height', '800');
img.onload = function() {
canvasContext.drawImage(img, 0, 0);
var res = canvasElement.toDataURL('image/png');
console.log(res);
}
img.crossOrigin = 'Anonymous';
img.src = url;
}
var htmlElement1 = document.getElementById('content1');
var htmlElement2 = document.getElementById('content2');
getImage(htmlElement1);
getImage(htmlElement2);
</script>
</html>
Run it in Edge and observe the output in the console. The base64 images of both the HTML elements are logged separately. The base64 for content1 is generated properly while that for content2 contains a blank image.
Loading an image is an asynchronous task, even when the src is set to a dataURL.
I guess Edge's young integration of <foreignObject> still has some quirks for delaying the outside's <img> onload event until all its inner resources are effectively loaded.
I don't think there is much you can do here, apart from filling an issue, or adding a delay inside the <img>'s onload event handler.
You may want to try HTMLImageElement.decode() but I'm not even sure Edge supports this, nor if it may work at all.
And for your more general case, you may want to avoid this foreignObject hack altogether and rather draw your DOM directly from the canvas API, just like html2canvas does.
I have a page where the images are supplied dynamically and are scaled with javascript to fit within the appropriate dimensions. This was initially being done with an onload attribute in the img tag, but then I noticed that in IE, the height being returned for the image was much less in some cases than the actual height, which ended up distorting the image. I solved this by finding and resizing all the images after $(window).load() was done, which worked fine for the initial page load, but I also have the page set up to add more content with an ajax call. For the ajax content, I tried some code I found on here that improved the problem, but didn't completely solve it. Here is an example of one of my image tags
<img id="img<?php echo $prodModObj->rolloverID; ?>" class="mbImg unsized" src="<?php echo $prodModObj->img; ?>" alt="<?php echo $prodModObj->name; ?>" onerror="swapImage(<?php echo $prodModObj->rolloverID; ?>)" />
The swapImage function just swaps out the image with a placeholder if there is an error while loading. Here is my JS
function swapImage(thisImgID) {
var imgID = 'img#img' + thisImgID;
$(imgID).attr('src', '/images/NoImageAvail.jpg');
}
function checkImage(thisImgID, fitDimension, spaceDimension) {
var imgID = 'img#img' + thisImgID;
var imgHeight = $(imgID).height();
var imgWidth = $(imgID).width();
var displayHeight, displayWidth, newMargin;
if (imgHeight > imgWidth) {
displayHeight = fitDimension;
displayWidth = imgWidth*(displayHeight/imgHeight);
} else if (imgHeight < imgWidth) {
displayWidth = fitDimension;
displayHeight = imgHeight*(displayWidth/imgWidth);
} else {
displayWidth = fitDimension;
displayHeight = fitDimension;
}
$(imgID).css('height', displayHeight);
$(imgID).css('width', displayWidth);
newMargin = ((spaceDimension - displayHeight)/2);
$(imgID).css('margin-top', newMargin);
$(imgID).removeClass('mbImg unsized').addClass('mbImg sized');
}
And then on the page I have
$(window).load(function(){
// Resize product images
$('.mbImg.unsized').each( function() {
var rolloverID = $(this).attr('id').substr(3);
checkImage(rolloverID,250,270);
});
});
And then in the success portion of the ajax call, I have
$('.mbImg.unsized').each( function() {
var rolloverID = $(this).attr('id').substr(3);
if (this.complete) {
checkImage(rolloverID,250,270);
} else {
$(this).on('load', function(){
checkImage(rolloverID,250,270);
});
}
});
Images that have been cached by the browser work fine, and the images in the initial page load work fine, but about 1 in 5 of new ajax images come out distorted. Is there another method I can use to size all the ajax images correctly in IE?
Thanks for your help,
Maybe come at it another way?
I've tried to move away from html4 style tag syntax, to using simple html5 tags and a combination of JavaScript and CSS to control the "view".
Check out this fiddle:
http://jsfiddle.net/zacwolf/s1haq3mz/
A question becomes how you want your images to flow, as using this approach all of the images are technically the same size (as demonstrated by the border). Also note that the .src for the second image I tweeked the url a bit so that it was a 404 for the image file, which triggered the one error image instead.
<img id="one" class="myclass" />
<img id="two" class="myclass" />
<style>
.myclass{
height:270px;
width:250px;
background-position:center,center;
background-repeat:no-repeat;
background-size:contain;
}
</style>
<script>
var one = new Image();
one.onerror=
function(){
this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png'
}
one.onload=
function(){
$('#one').css('background-image','url('+one.src+')')
}
one.src='https://cjjulian.files.wordpress.com/2009/04/blah_blah_blah-703369.jpg';
var two = new Image();
two.onerror=
function(){
this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png';
}
two.onload=
function(){
$('#two').css('background-image','url('+two.src+')')
}
two.src='https://cjjulian.files.wordpress.com/2019/04/blah_blah_blah-703369.jpg';
</script>
If you have a lot of images, you can populate an array of Image objects, for better referencing, etc.
From a html5 drag'n drop plugin, i'm getting a data uri of dropped images (or from a file input..).Then i'm setting it as an image src :
$("#preview").attr("src",image);
Now, i need to make some actions depending on the image dimensions. I tried this by two ways :
1) - By getting the image height and width from the uri data directly (i got this piece of code from here
var curHeight;
var curWidth;
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
curHeight = newImg.height;
curWidth = newImg.width;
}
getImgSize(The_data_uri);
2) by testing on the created image on the html :(here i created two booleans)
var lt = function(v1, v2){
return v1 < v2;
}
var gt400 = (lt(400,parseInt($("#preview").css('width').replace('px', ''))) && lt(400,parseInt($("#preview").css('height').replace('px', ''))) && !window['cropIsOn'] );
var eq400 = (parseInt($("#preview").css('width').replace('px', ''))==400 && parseInt($("#preview").css('height').replace('px', ''))==400) && !window['cropIsOn'] ;
On chrome i always got the correct dimensions and therefore tests on dimentions are corrects. However, on firefox it's not correct (i got wrong width and height values). by the way, i'm not trying with different image format for each time(i'm only using jpg images).
i wish to understand why firfox isn't stable about reading height and width.Cheers!
-EDIT-
the image which i'm trying to get its dimensions is inside a hidden div
<div id="prview_img_wrap" style="position:absolute;top:465px; left:200px;z-index:8; width:100px;height:100px;overflow:hidden;margin-left:5px; border:2px dashed white; visibility:hidden;">
<img src="" id="preview" />
</div>
The height and width of the image are only available after the image is loaded. so this is the correct way:
var curHeight;
var curWidth;
function getImgSize(imgSrc){
var newImg = new Image();
newImg.onload = function () {
curHeight = this.height;
curWidth = this.width;
};
newImg.src = imgSrc;
}
I want to add an image by Javascript, then calculating the html element width as
window.onload=function(){
document.getElementById('x').addEventListener('click', function(e){
var el = document.getElementById('xx');
el.innerHTML = '<img src="img.jpg" />';
var width = el.offsetWidth;
.....
}, false);
}
but since JavaScript conduct all processes simultaneously, I will get the width of the element before loading the image. How can I make sure that the image has been loaded into the content; then calculating the element width?
UPDATE: Thanks for the answers, but I think there is a misunderstanding. img src="img.jpg" /> does not exist in the DOM document. It will be added later by Javascript. Then, when trying to catch the element by Id, it is not there probably.
You can give the img an ID and do the following :-
var heavyImage = document.getElementById("my-img");//assuming your img ID is my-img
heavyImage.onload = function(){
//your code after image is fully loaded
}
window.onload=function(){
document.getElementById('x').addEventListener('click', function(e){
var el = document.getElementById('xx');
var img = new Image();//dynamically create image
img.src = "img.jpg";//set the src
img.alt = "alt";
el.appendChild(img);//append the image to the el
img.onload = function(){
var width = el.offsetWidth;
}
}, false);
}
This is untested, but if you add the image to the DOM, set an onload/load event-handler and then assign the src of the image, the event-handling should fire (once it's loaded) and allow you to find the width.
This is imperfect, though, since if the image is loaded from the browser's cache the onload/load event may not fire at all (particularly in Chromium/Chrome, I believe, though this is from memory of a bug that may, or may not, have since been fixed).
For the chrome bug you can use the following:-
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';//create a blank source
var tImg = document.getElementById("my-img");//get the image
var origSrc = tImg.src;//get the original src
tImg.src = BLANK;//change the img src to blank.
tImg.src = origSrc;//Change it back to original src. This will lead the chrome to load the image again.
tImg.onload= function(){
//your code after the image load
}
You can use a library called PreloadJS or you can try something like this:
//Somewhere in your document loading:
loadImage(yourImage, callbackOnComplete);
function loadImage(image, callbackOnComplete){
var self = this;
if(!image.complete)
window.content.setTimeout(
function() { self.loadImage(image, callbackOnComplete)}
,1000);
else callbackOnComplete();
}
I did this when I worked with images base64 which delay on loading.
I have an image element with a spinner gif. I later dynamically change the src of that image with jQuery, and I want to get the actual width and height of the new image. Here is my code:
function loadImage() {
$('#uploaded-image').load(function() {
var img = document.getElementById('uploaded-image');
// These statements return the correct values in FF and Chrome but not IE
imgWidth = img.clientWidth;
imgHeight = img.clientHeight;
});
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl);
}
This works perfectly in Chrome and Firefox, but IE always returns the size of the original spinner gif instead of the new image.
How can I get the width and height of the new image in IE?
Notes:
I've tried the jQuery .width() and .height() methods in addition to the pure Javascript approach, with the same results.
The .load event is being fired as expected in all browsers.
Use offsetHeight and offsetWidth in IE.
Check this out in your IE: http://jsbin.com/abopih/5
var imgUrl = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
var img = document.getElementById('uploaded-image');
$('#uploaded-image').click(function() {
imgWidth = img.clientWidth;
imgHeight = img.clientHeight;
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl);
console.info('clientWidth: ', img.clientWidth);
console.info('clientHeight: ', img.clientHeight);
console.info('offsetWidth: ', img.offsetWidth);
console.info('offsetWidth: ', img.offsetWidth);
});
You could create a hidden div and place the image in there in order to get the size. Just make sure the hidden div isn't done with display:none, because then it will have no dimensions. Use visibility:hidden, grab the dimensions, and then remove it.
Make sure you remove css height and width as well:
$('#uploaded-image').css({ height: "auto", width: "auto" });
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file" />
<script type="text/javascript" charset="utf-8">
$("#file").change(function(e) {
var file, img;
file = document.getElementById("file");
if (file!=null) {
img = new Image();
img.src = file.value;
img.onload = function() {
alert(img.width + " " + img.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
}
});
</script>
It seems to be a cache problem.
Add this to your image source url:
imgUrl += new Date().getTime();