Set the size of img before displaying - javascript

When user clicks on the button, the image from canvas will be displayed in a img element. I have checked to see if the width of image exceeds, if so, resize it before display. However, this does not work. When I debug it, I realized the checking of width is based on my old width and not the new width.
<input type="button" value="Load" onclick="loadImage();" />
<img id="aImg" name="aImg" src="${param.src}"></img>
In Javascript...
function loadImage() {
var dataURL = "http://xxx.jpg";
var dis = document.getElementById("aImg");
dis.crossOrigin = "anonymous";
dis.src = dataURL;
if(dis.width > 800){
dis.width = 800;
}
}
My image is apparently over 800, however, it still displaying in its actual width. When I debug, dis.width actually check on my old width. Any ways to resolve this issue? Thanks.

That's because it's dis.style.width, not dis.width
edit
Sorry, looks like I misunderstood your question. I think I would handle this in a different way, I would let the CSS handle the size of the image for me. Take a look: http://jsfiddle.net/ysGVP/2/
Try adjusting my max-width value in my .img-wrap css.
When set at 100px it shrinks the picture to fit the wrap, when set at say.. 900px, the image is shown in its normal width. So basically, max-width can be used as your "if image is over X size, shrink it"
Is this what you're trying to accomplish?

Related

Creating a canvas with responsive size for drawing in angular

I am currently working on a small Web App Game written angular. I wanted to add a feature for users to draw their on profile picture using a canvas HTML element.
I never worked with canvas before so i searched the internet for examples and i found this one which really helped me out getting started.
So i created a component and used exactly this code which worked immediately. My next goal was to make the canvas size responsive, so it looks good on every device.
A quick google search gave me multiple ways to achive this:
Adding width: 100%; height: 100% to the canvas style
Setting the size in ngAfterViewInit() like this:
canvasEl.style.width = "100%";
canvasEl.style.height = "100%";
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;
Both solution kind of worked. The canvas was now as big as possible which was great.
However the drawing did not work properly anymore.
When drawing the canvas wasn't changing at all or the lines were not created at the position of the cursor (instead of increased canvas size it felt like the canvas was stretched and the actual size in pixel did not change).
As CBroe mentioned i have to set the width and height of the properties of the canvas itself.
So now i am trying to retrieve the height and width of the parent container in ngAfterViewInit() but the values are always zero:
#ViewChild('parent') parent: ElementRef;
ngAfterViewInit() {
...
console.log (this.parent.nativeElement.offsetHeight);
...
}
html code:
<div #parent fxFlex>
<canvas id="responsive-canvas" #myCanvas></canvas>
</div>
After a lot of try and error i found a solution to my problem which looks like that:
replaced the height and width set in the ngAfterViewInit() of the canvas with this code
canvasEl.style.width = "100%";
canvasEl.style.height = "100%";
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;
and this is what my html code looks like:
<div #parent fxFlex style="height: 200px;">
<canvas
id="responsive-canvas"
[height]="parent.offsetHeight"
[width]="parent.offsetWidth"
#myCanvas
>
</canvas>
</div>
It is important, that the height of the parent is set. Otherwise it does not work.

set div to window size with JavaScript linked to html file

So I have been trying to make an image fit to the window size. Is there any way to resize a div to window width while keeping the right ratios using an event listener? I have looked through the internet but nothing has worked. I think that it will be using stuff like this. when resize expand to window width, hight = 5/3 width. It will most likely use an EventListener. i have tried making width 100% but that just cuts off the bottom of the image not letting me scroll down to see the rest.
Set image width to 100%, don't set a height and the image will maintain aspect ratio.
<body>
<img src="..." style="width: 100%" />
</body>
See example:
http://codepen.io/jessegavin/pen/QNzeaX
CSS is the way you should go. width: 100%;is one thing you can go. But if your viewport is scaleable, you should use width: 100vw;.
Try this code
window.onresize = function(){
div.style.width = window.innerWidth + 'px';
div.style.height = window.innerHeight + 'px';
}

How can I change the size of an image without cropping?

I have an image source:
var _img = <img src="../images/yadayada.jpg">
And I want it enlarge it or shrink it without cropping it, but I'd rather not grab the element after and change the css.
I tried:
_img.height = 200;
and
_img.style.height = 200
But the first crops it, and the second does nothing.
Style values need units so the style setting would be like this:
_img.style.height = "200px";
This will change the scaled size of the image. If you only set just the height or just the width, then the other should scale to maintain the aspect ratio. You will have to make sure that the HTML layout the image is positioned in is flexible and can handle the image changing size.
Image resize demo: http://jsfiddle.net/jfriend00/K8GJQ/
It's a little hard to tell if you're trying to change an existing image or set dimensions for a new image you're trying to create...
The statement var _img = <img src="../images/yadayada.jpg"> won't do anything by itself except cause your JS to fail to load (it's just a string, and is missing surrounding quotes and semicolon).
If you're trying to target an image that's already in the HTML, give its <img> tag a unique ID that you can target, and then set the width or height.
In the HTML: <img id="yadayadaImage">
In the JS:
var myImage = document.getElementById('yadayadaImage');
myImage.style.width = "200px";
Setting only style.width OR style.height here should keep the image from being cropped, since the other dimension should expand automatically. If it's still cropped check the parent element's width & height attributes, because that may be what's restricting the size.
.
If you're actually trying to create a new image w/specific source and dimensions, what you had above won't work. You need to create a new<img> element with those attributes, then append it to the document.
var targetDiv = document.getElementById("myPhotoDiv");
var imgTag = document.createElement('img');
imgTag.id = "yadayadaImage";
imgTag.className = "uncroppedImage";
imgTag.src = "../images/yadayada.jpeg";
//you COULD set height & width properties here, but that's what CSS is for.
imgTag.style.width = "200px";
targetDiv.appendChild(imgTag); //add the new img to the page
The best approach, but which you said you didn't want to do, is to use CSS and create a class that you can reuse for other images where you don't necessarily know the specific width or height.
.uncroppedImage{
width:100%;
}
Better setup an id for your image like this
<img id="myImg" src="../images/yadayada.jpg">
and use the script below
var myImg = document.getElementById('myImg');
if(myImg && myImg.style) {
myImg.style.height = '200px';
}

How can one find the "maximized" height of a browser window?

I am trying to make a picture take up 70% of the user's screen. However, if the screen is made smaller when the page is loaded or if the person has inspect element open, the picture becomes small and stretched. I believe the best solution would be to find the maximum height of the browser window and make the image that size. However, I am not sure how to do that?
Here is my current code for image sizing:
var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);
I also want to make it so that if someone is using a huge monitor (i.e. large Mac), the image size maxes out at that point? Any suggestions would be very helpful!
Edit: I don't want to make the image resize dynamically. Only load once.
Use window.screen.availHeight instead of window.innerHeight
or screen.height
var x = screen.height*0.7;
EDIT: Here's more code to show that it works for what you asked. Gets the height upon load and doesn't resize.
<img id="img2" src="http://lorempixel.com/320/240/food" />
<script>
$(document).ready(function () {
var x = screen.height*0.7;
$('#img2').css("height",x);
}
</script>
It sounds like what you want to do is something like this:
img{
display:block;
width:70%;
min-width:320px;
max-width:1200px;
}
If you want the image to take up 70% of the viewport height (and obviously retain its ratio) you could use the new css unit vh (viewport height) like this:
img
{
height: 70vh;
}
FIDDLE

image width and height different between desktop and iPad on webpage?

I wrote a simple javascript code to load an image and alert its width and height, but I found its width and height will different between desktop and iPad.
For example, I load an image that size is 8000*1845, browser shows image width is 8000 and height is 1845. Therefore, on iPad, browser show image width is 2000 and height is 462.
The other image is 2600 * 2400, browser shows image width is 2000 and height is 2400, but it shows image width is 1300 and height is 1200.
I don't know whether I misunderstanding something or not. Will iOS downsize the image?
Anybody knows? Please tell me what happen?
var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img8000.onload = function () {
alert(img8000.width + ' ' + img8000.height);
}
var img2600 = new Image();
img2600.src = '2600_2400.jpg';
img2600.onload = function () {
alert(img2600.width + ' ' + img2600.height);
}
When you get the image's height or width using this.width or when using jQuery's $(this).width() you are actually getting its current dimensions. If the image is scaled up or down, then the values you get will not match the actual source image's dimensions.
I made an example you can play with. It is pre-written to use onclick, but if you remove those onclick attributes and uncomment the jQuery code, you'll find it alerts the same values.
You should attempt to avoid image scaling by placing the image somewhere on the page where the CSS does not affect its size (as a test, try making a blank page containing just the image), and remove any custom height/width attributes if they exist.
Otherwise, if the scaling is done natively by the iPad Safari browser, there is little you can do.

Categories