Getting width and height from a picture using Javascript - javascript

How can I get width and height from a picture stored in a directory using Javascript?

From a web browser:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Dimensions</title>
</head>
<body>
<img id="myImage" src="image.png">
<script>
var img = document.getElementById("myImage");
img.onload = function (event) {
console.log(`natural: ${img.naturalWidth}, ${img.naturalHeight}`);
console.log(`width,height: ${img.width}, ${img.height}`);
console.log(`offset: ${img.offsetWidth}, ${img.offsetHeight}`);
}
</script>
</body>
</html>

Related

How to auto scroll down iframe to bottom without jquery

I'm trying to scroll down an iframe (local file .html) but isn't working.
I've tried this code, but the iframe stays in the same position (the scroll bar):
<html>
<head>
<title>Untitled Document</title>
<script>
var myIframe = document.getElementById('01');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(200, 300);
}
</SCRIPT>
</head>
<body>
<iframe id="01" src="Content.html" name="iframe2" width="150" heigth="200"></iframe>
</body>
</html>

when using double buffering to draw image on canvas, cannot get the complete image?

this is my code, i use two canvas to drawimage to avoid flickering, but i cant get the full image when use this way, anyone can help please?
if i only use one canvas the image display fine, it seems the secondarycanvas that created by Javascript got some issue to display the image, but i can't find what's wrong. any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>

Need html code to print webpage image only, in focus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Coupon Page</title>
<script type="text/javascript">
function printCoupon() {
var timeout = 1000;
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
</script>
</head>
<body onload="printCoupon();">
<p><img src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
</body>
</html>
I've searched for html coding to print webpage image only when image (w585 w250), actual size of image, or a related button is clicked. I found coding that works perfectly yet prints my image really out of focus. The coding you show addresses this by stating focus and such, I've worked on this for near a month without success, Please help
You can try media queries in css to print the image.
Check naturalWidth and naturalHeight and compare with image width and height so if they match then print page.
function printCoupon() {
var timeout = 1000;
var naturalWidth = $('#img')[0].naturalWidth;
var naturalHeight = $('#img')[0].naturalHeight;
var width = $('#img').width()
var height = $('#img').height();
if (naturalWidth == width && naturalHeight == height) {
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body onload="printCoupon();">
<p><img id="img" src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>

Adding another image using Javascript

Please find the code and advise.
I am trying to add an another image ('correct10.png') onClick Event of displayed image i.e 'Van.png'. But nothing happend, so please suggest.
Here the html :
<!DOCTYPE html >
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
<script>
function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</head>
<body>
<p><img src="van.png"></p>
</body>
</html>
Your doImgSwap method creates an event handler, it does not actually swap the image.
Should be:
function doImgSwap(el){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
el.appendChild(img);
}
And you'll have to pass in the element in the onClick attribute, like this
onClick="doImgSwap(this)"
here's a working jsfiddle of your code
Your code should be
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
<script>
window.onload = function() {
document.getElementById('newImg').addEventListener('click', function(e) {
var img = document.createElement('img');
img.setAttribute('src', 'correct10.png');
this.appendChild(img);
});
}
</script>
</head>
<body>
<p>
<a href="#" id="newImg">
<img src="van.png"/>
</a>
</p>
</body>
</html>
start by putting the js file under your html or use window.onload function to be sure
<!DOCTYPE html >
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
</head>
<body>
<p><img src="van.png"></p>
<script>
function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</body>
</html>

Cannt read img width added from css file [duplicate]

This question already has answers here:
How to get element's attribute set in CSS class
(6 answers)
Closed 9 years ago.
I checked it in two newest browsers.
JS code:
window.onload = function () {
alert
(document.getElementById("slideshow").getElementsByTagName ("img") [0].style.width);
}
HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
</body>
</html>
CSS code:
#slideshow img {
display : none;
width : 300px;
height : 200px;
}
But I have empty string from alert. Why the error (no errors in Firebug) occurs? Can I read style added from css file at all ? http://jsfiddle.net/HM47Q/
Use getComputedStyle instead.
window.onload = function () {
var elem = document.getElementById("slideshow").getElementsByTagName("img")[0];
console.log(window.getComputedStyle(elem, null).getPropertyValue("width"));
}
jsFiddle example
Empty images doesn't have width/height
Because you are retrieving inline style.
use this:
var element = document.getElementbyId("#slideshow").getElementsByTagName('img')[0];
var style = window.getComputedStyle(element),
var width = style.getPropertyValue('width');
JSFiddle: http://jsfiddle.net/enzoferber/HM47Q/2/
var firstImg = document.getElementById("slideshow").getElementsByTagName ("img") [0];
alert ( window.getComputedStyle(firstImg).width );
You have to use getComputedStyle in order to do it.
This is working::
Make your image display:block,otherwise it will return 0.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
#slideshow img {
display : block;
border:1px solid;
width : 300px;
height : 200px;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
<script>
window.onload = function () {
alert(document.getElementsByTagName('img')[0].clientWidth);
}
</script>
</body>
</html>

Categories

Resources