PROBLEM: I have 2 images, one is taken from my database using src=data:image;base64,$row[2] and has given dimensions.
The other image is taken from an HTML element with ID=img00 and it is a transparent image. I need the transparent image to have the same width and height of the image taken from my database.
MY GUESS: I would like to save getMeta output to 2 variables for width and height, that I would later use instead of '200px'.
Do you believe there's a smarter way than this code?
Else, what would I have to do to save getMeta output and use it instead of that 200px?
function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
getMeta(
"data:image;base64,$row[2]",
function(width, height) { alert(width + 'px ' + height + 'px') }
);
var img00 = document.getElementById('img00');
if(img00 && img00.style) {
img00.style.height = '200px';
img00.style.width = '200px';
}
If you want to use the values from inside getMeta, you are going to have to change the timing of the execution of the last block of code. Perhaps something like this?
function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
function sizeImg00(w,h){
var img00 = document.getElementById('img00');
if(img00 && img00.style) {
img00.style.height = h + 'px';
img00.style.width = w + 'px';
}
}
getMeta(
"data:image;base64,$row[2]",
function(width, height) {
console.log(width + 'px ' + height + 'px');
sizeImg00(width, height);
}
);
Related
I'm trying to get the width and height of an external image and use the width and height to set a Div's width and height in my page.
I can easily get the image width and height but I cannot use the width/height for my div for some strange reason!
To explain this better, I've created this fiddle:
https://jsfiddle.net/qtc3q6sd/2/
And this is my entire code:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.width);
$("#mydiv").css("width", $(this.width()));
$("#mydiv").css("height", $(this.height()));
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
could someone please advise on this issue?
Thanks in advance.
You are getting the width and the height the wrong way.
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
$("#droppable").css("width", this.width);
$("#droppable").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
See jsfiddle.
Nothing wrong with the logic of your code. just a syntax error.
it should be $(this).width() instead of $(this.width())
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.width);
$("#mydiv").css("width", $(this).width());
$("#mydiv").css("height", $(this).height());
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
Syntax is just a bit off,
try this
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
$("#mydiv").css("width", this.width);
$("#mydiv").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
Here is your solution. Inside your callback function, this is the image
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
$("#mydiv").css("width", this.width + 'px');
$("#mydiv").css("height", this.height + 'px');
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
Your code has two mistakes.
First, inside the onload function 'this' represents the image object. You're trying to call the with() and height() functions of the image, but they're not functions, they are properties. You must lose the '()'.
Second, when you try to do this $(this.width()) you're encapsulating the width value in a jQuery object. You don't need that, just use the width property this.width.
The code below will work:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.width);
$("#mydiv").css("width", this.width);
$("#mydiv").css("height", this.height);
}
img.src = 'https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
I need to resize multiple images.
This is the HTML:
<img id="thumbnailId" src='http://thumbs1.ebaystatic.com/m/mPlrV_wS_b1vK9avUQ22r9w/140.jpg' class="img-responsive galleryproductimg" style="border: 0px solid blue; margin-top:10px;" />
<img id="thumbnailId" src='http://thumbs1.ebaystatic.com/m/mIeHLNVqUI1opFM0NmZvH_A/140.jpg' class="img-responsive galleryproductimg" style="border: 0px solid blue; margin-top:10px;" />
And my JavaScript code:
$(document).ready(function() {
console.log("ready to go");
var imgs = getElementsById("thumbnailId");
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
img.onload = function () {
console.log("image is loaded");
}
resizeImage(img);
}
});
The functions called from this:
function getElementsById(elementID) {
var elementCollection = new Array();
var allElements = document.getElementsByTagName("*");
for(i = 0; i < allElements.length; i++) {
if(allElements[i].id == elementID)
elementCollection.push(allElements[i]);
}
return elementCollection;
}
And
function resizeImage(img) {
console.log("width, height, src " + img.width + ", " + img.height + ", " + img.src);
console.log("loaded? " + img.complete);
var width = img.width;
var height = img.height;
var constant = 100;
var ratio = width / height;
console.log("ratio " + ratio);
if(width > constant || height > constant) {
var newWidth = constant;
var newHeight = constant*ratio;
if(width > height) {
newWidth = constant;
newHeight = constant*ratio;
} else {
newWidth = constant*ratio;
newHeight = constant;
}
console.log("newWidth, newHeight " + newWidth + ", " + newHeight);
//img.width = newWidth;
//img.height = newHeight;
img.style.width = newWidth + "px;";
img.style.height = newHeight + + "px;";
console.log("img from url AFTER " + img.width + ", " + img.height);
}
console.log("==========================");
}
The code seems right, and works for one image. But not for multiple images. The output I get is this:
ready to go
resizeImages called
width, height, src 84, 110, http://thumbs1.ebaystatic.com/m/mPlrV_wS_b1vK9avUQ22r9w/140.jpg
loaded? true
ratio 0.7636363636363637
newWidth, newHeight 76.36363636363637, 100
img from url AFTER 84, 110
==========================
width, height, src 86, 110, http://thumbs1.ebaystatic.com/m/mIeHLNVqUI1opFM0NmZvH_A/140.jpg
loaded? true
ratio 0.7818181818181819
newWidth, newHeight 78.18181818181819, 100
img from url AFTER 86, 110
==========================
2 image is loaded
So basically I'm not even getting the correct dimensions of the image at the start. For some reason the width is always 110. Any idea what's going on here?
HTML element ID must be unique.
You cannot have more than one element using the same ID
Use HTML element Class instead of ID. Use document.getElementsByClassName to filter these elements.
First of all in html id can not be duplicate in whole html page .. and second thing ... you did not called image resize function because it is function's .. out of scope
$(document).ready(function() {
console.log("ready to go");
var imgs = getElementsById("thumbnailId");
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
img.onload = function () {
console.log("image is loaded");
//call should be here
resizeImage(img);
}
//resizeImage(img);
}
});
I'm trying to display the height & width of a certain image inside a div. However its now displaying 'undefined'. I guess this has to do with that onload is an ASYN function. I'm pretty new to coffeescript/javascript and i'm trying to learn it. But how can I enable the callback?
getMeta = (url, callback) ->
img = new Image()
img.src = url
console.log(img)
img.onload = ->
console.log("load")
width = #width
height = #height
imageUrl = "http://imgcdn.igdb.com/images/limbo/6843_screenshot_show_6843_at_igdb_com.jpg"
meta = getMeta imageUrl
$("#debug").html("Height: " + meta.height + "px W: " + meta.width + "px")
But, if you really want it at the top, try:
$("document").ready(function() {
$("#click").click(function() {
var img = new Image();
img.onload = function() {
$("#debug").html("Height: " + this.height + "px W: " + this.width + "px")
}
img.src = $("#img_url").val();
});
});
and the HTML
<input id="img_url" type="text">
<div id="click">Click Here</div>
<div id="debug"></div>
Example: http://jdl-enterprises.co.uk/sof/25742662.php
Looking for a way to get the dimensions (width and height) of an external image. I have used prop() and attr(), but they don't return any values. Just an error.
Example:
some link
jQuery
var path = 'https://source.unsplash.com/random/600x300/?montreal';
$("<img/>").attr('src', path).load(function() {
console.log(this.width, this.height);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Vanilla Javascript
var path = 'https://source.unsplash.com/random/600x300/?montreal';
var img = new Image();
img.src = path;
img.addEventListener('load', function() {
console.log(this.width, this.height);
});
Looks like none has provided a working vanilla js answer.
var img = document.createElement('img')
img.src = 'http://domain.com/img.png'
img.onload = function() {
console.log( this.width )
console.log( this.height )
}
Here is a jsfiddle: http://jsfiddle.net/Ralt/VMfVZ/
This isn't technically jQuery but I would go down the route of:
var image = new Image(), width, height;
image.src = 'http://whereyourimage.is/heresmyimage.jpg';
width = image.width;
height = image.height;
You can then access those values using width and height, for example alert('My image is ' + width + ' pixels accross.');
I have a image resizer function that resize images proportional. On every image load a call this function with image and resize if its width or height is bigger than my max width and max height. I can get img.width and img.height in FF Chrome Opera Safari but IE fails. How can i handle this?
Let me explain with a piece of code.
<img src="images/img01.png" onload="window.onImageLoad(this, 120, 120)" />
function onImageLoad(img, maxWidth, maxHeight) {
var width = img.width; // Problem is in here
var height = img.height // Problem is in here
}
In my highligted lines img.width don't work on IE series.
Any suggestion?
Thanks.
Don't use width and height. Use naturalWidth and naturalHeight instead. These provide the image unscaled pixel dimensions from the image file and will work across browsers.
Man, I was looking for this for 2 days. Thanks.
I'm using jQuery, but it doesnt matter. Problem is related to javascript in IE.
My previous code:
var parentItem = $('<div/>')
.hide(); // sets display to 'none'
var childImage = $('<img/>')
.attr("src", src)
.appendTo(parentItem) // sets parent to image
.load(function(){
alert(this.width); // at this point image is not displayed, because parents display parameter is set to 'none' - IE gives you value '0'
});
This is working in FF, Opera and Safari but no IE. I was getting '0' in IE.
Workaround for me:
var parentItem = $('<div/>')
.hide();
var childImage = $('<img/>')
.attr("src", src)
.load(function(){
alert(this.width); // at this point image css display is NOT 'none' - IE gives you correct value
childImage.appendTo(parentItem); // sets parent to image
});
This is how I solved it (because it's the only js on the site I didn't want to use a library).
var imageElement = document.createElement('img');
imageElement.src = el.href; // taken from a link cuz I want it to work even with no script
imageElement.style.display = 'none';
var imageLoader = new Image();
imageLoader.src = el.href;
imageLoader.onload = function() {
loaderElement.parentElement.removeChild(loaderElement);
imageElement.style.position = 'absolute';
imageElement.style.top = '50%';
imageElement.style.left = '50%';
// here using the imageLoaders size instead of the imageElement..
imageElement.style.marginTop = '-' + (parseInt(imageLoader.height) / 2) + 'px';
imageElement.style.marginLeft = '-' + (parseInt(imageLoader.width) / 2) + 'px';
imageElement.style.display = 'block';
}
It's because IE can't calculate width and height of display: none images. Use visibility: hidden instead.
Try
function onImageLoad(img, maxWidth, maxHeight) {
var width = img.width; // Problem is in here
var height = img.height // Problem is in here
if (height==0 && img.complete){
setTimeOut(function(){onImageLoad(img, maxWidth, maxHeight);},50);
}
}
var screenW = screen.width;
var screenH = screen.height;
//alert( screenW );
function checkFotoWidth( img, maxw )
{
if( maxw==undefined)
maxw = 200;
var imgW = GetImageWidth(img.src);
var imgH = GetImageHeight(img.src);
//alert(GetImageWidth(img.src).toString()); // img.width); // objToString(img));
if (imgW > maxw || (img.style.cursor == "hand" && imgW == maxw))
{
if (imgW > screenW) winW = screenW;
else winW = imgW;
if (imgH > screenH) winH = screenH;
else winH = imgH;
img.width=maxw;
img.style.cursor = "pointer";
img.WinW = winW;
img.WinH = winH;
//alert("winW : " + img.WinW);
img.onclick = function() { openCenteredWindow("Dialogs/ZoomWin.aspx?img=" + this.src, this.WinW, this.WinH, '', 'resizable=1'); }
img.alt = "Klik voor een uitvergroting :: click to enlarge :: klicken Sie um das Bild zu vergrössern";
//alert("adding onclick);
}
}
function GetImageWidth(imgSrc)
{
var img = new Image();
img.src = imgSrc;
return img.width;
}
function GetImageHeight(imgSrc)
{
var img = new Image();
img.src = imgSrc;
return img.height;
}
I'd try this:
function onImageLoad(img, maxWidth, maxHeight) {
var width, height;
if ('currentStyle' in img) {
width = img.currentStyle.width;
height = img.currentStyle.height;
}
else {
width = img.width;
height = img.height;
}
// whatever
}
edit — and apparently if I were to try that I'd learn it doesn't work :-) OK, well "width" and "height" definitely seem to be attributes of <img> elements as far as IE is concerned. Maybe the problem is that the "load" event is firing for the element at the wrong time. To check whether that's the case, I would then try this:
function onImageLoad(img, maxWidth, maxHeight) {
var width, height;
var i = new Image();
i.onload = function() {
width = i.width; height = i.height;
// ... stuff you want to do ...
};
i.src = img.href;
}
getDisplay().getImage().setUrl(imgURL);
final Image img = new Image(imgURL);
int w=img.getWidth();
int h=img.getHeight();