Set div width and height using an external image? - javascript

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';

Related

Property 'width' does not exist on type 'GlobalEventHandlers'

I would get the size of an image, following this tutorial, but I get a TypeScript error:
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
How to get image size (height & width) using JavaScript?
Property 'width' does not exist on type 'GlobalEventHandlers'.
What to do?
The load handler's this isn't typed to the image. Reference the image directly instead.
const img = new Image();
img.onload = function() {
console.log(img.width + 'x' + img.height);
}
Or use addEventListener.
img.addEventListener('load', function() {
console.log(this.width + 'x' + this.height);
})

Take image dimensions and apply them to another image

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);
}
);

img.width and img.height randomly returns 0

Thanks to existing threads, I was able to come up with the following code:
var img = new Image();
img.src = imgSrc;
if(imgSrc.substring(imgSrcLength-4, imgSrcLength) == '.ico'){
document.getElementById('size' + lineCount).innerHTML = img.height + 'x' + img.width;
} else {
document.getElementById('size' + lineCount).innerHTML = img.naturalHeight + 'x' + img.naturalWidth;
}
You can basically ignore the lineCount part. It just should display the size of different Images in an html list. However sometimes the width or height is returned as 0. For me it appears to be random since if I run the script again the right amount will be loaded and some other place is 0. If I try to debug the code via the Microsoft Edge function everything works fine and there won't be any 0.
Is this a problem caused by my Microsoft Edge or did I miss out onto something?
You need to wait for the image to finish loading and then get it's size. Try it like that:
var img = new Image();
img.onload = function () {
if(imgSrc.substring(imgSrcLength-4, imgSrcLength) == '.ico'){
document.getElementById('size' + lineCount).innerHTML = img.height + 'x' + img.width;
} else {
document.getElementById('size' + lineCount).innerHTML = img.naturalHeight + 'x' + img.naturalWidth;
}
};
img.src = imgSrc;
Most probably the image returns 0 for width and height when it is not loaded while the code is evaluated. Please make sure that the image is loaded before running your code (i.e. by running the code in the onLoad event for window).

How to display an image as a property in JavaScript objects

//construtor created
function Blog(text, date, image) {
this.show_image = function(src, width, height, alt){
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
}
//instance
var blog = [new Blog("hello!,Welcome to my blog1.", new Date("10/21/2012"),'show_image("images/overlay.png", 20,30, "Google Logo")'),
Hey m calling an image in above instance for that i've written a function show_image performs that part but the image is not getting displayed...please tell me what is wrong here ...please modify it...I'm new in javascript programming..
I
i have no idea why are you creating constructor and all..this can be done, with creating a simple function
try this
function show_image(src, width, height, alt){
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
$(document).ready(function(){ //if using jquery
show_image("images/overlay.png", 20,30, "Google Logo");
});
You are actually not calling the show_images function. You are just passing a string and that is not going to help.
Remember before finding out why the particular block of code is not working, you need to find out if that block is executed at all.
This is one more way you make it work.
function Blog(text, date) {
this.show_image = function (src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
}
//instance
var blog = new Blog("hello!,Welcome to my blog1.", new Date("10/21/2012"));
blog.show_image("images/overlay.png", 20,30, "Google Logo");

jQuery: how to get the dimensions of a external image?

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.');

Categories

Resources