Using Javascript to change an 's src... First time the width and height properties are being set correctly. The Second time they don't change. Why?
So I've got this blank image on my page... <img id="imgCropImage" />
So the idea is that every time a user uploads an image, the uploader's UploadComplete callback will set this image's src to the image that has just been uploaded so that it can be cropped. I then use this image's height and width properties in order to create a blown up crop preview.
It works great the first time. The browser or the DOM or something automagically set the img's height and width attributes which I access via the DOM after the image has loaded. It's beautiful.
If the user uploaded the wrong image, I want to allow them to upload a different one. This time however, the img's width and height attributes, accessed via javascript, remain the same as the prior image. The new image displays correctly in it's own width and height, it's just that the tag's properties do not change along with a new src.
Does anyone know why this happens? Or even better, how I could deterministically get the img's height and width upon loading a new src?
I <3 stackoverflow and I <3 you.
What about "removing" the height and width attributes.
$('#imgCropImage').removeAttr('height');
$('#imgCropImage').removeAttr('width');
That should "Reset" it. (If you're using JQuery that is).
Did you try to replace the previous image by a new one, with the new src?
var newImg = document.createElement('IMG');
newImg.src = newSrc;
oldImg.parentNode.replaceChild(newImg, oldImg);
Related
I added CSS to a checkbox and it works just fine.
I use a local file (named check.png) to use as the check background image and crop it inside the checkbox area.
Here are two checkboxes one checked and one unchecked
Now I'd like to know if it's possible, instead of manually setting 25px in the CSS file, to get the background image's real width and height and set the width to background.width and the height to background.height/2.
That would allow to have it automatically resize if I ever change check.png and still work properly
EDIT: I think I was misunderstood. I want the box to fit the background image, not the image to fit the box. I'll try the opposite anyway
EDIT2: Okay Nvm Apparently fitting the background in the box was a better idea than fitting the box in the image. Thanks :D
You don't have to write the exact width and height.
To scale the background image to fit inside its container, you can simply use:
background-size:contain;
set
background-size: 100% 100%;
background-repeat: no-repeat;
Use this javascript to get image width and height:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'https://i.stack.imgur.com/4TObz.png';
#Durga's answer fits your need.
However, letting the resource file to decide your DOM component size seems not to be the best practice, doing the opposite way (use css to auto fit the image to your container, as #Koby suggested) is usually preferred.
EDIT: I figured it out. in one of the attached script was window.onload what caused for canvas to be created after everything alse was already executed. So when I added a script the canvas yet did not exist :)
I cannot change the size of canvas element.
I build typical website with Bootstrap and the code in my index.html is like this:
<div id="container">
//some code
<div id="divForCanvas">
</div>
</div>
<script src="js/index2.js"></script>
in the index2.js I append canvas as a child of
<div id="divForCanvas"></div>
What happens is that the generated canvas has different width and height than its div parent.
Is there a way to adjust size of canvas after it was already generated (without editing index2.js) ?
A canvas element has a size in pixels, which applies to the bitmap you draw onto, and it has a CSS size like any other HTML element. These two are not the same (exactly like how a JPEG has a size in pixels but can be displayed at any size on screen), but you can set either one at any time.
The CSS size can be set in the normal ways, via a stylesheet, the style property of the <canvas> element, or through the JS myCanvas.style.* properties.
The size of the canvas contents can be set through the width and height properties of the <canvas> tag, or the JS myCanvas.width and myCanvas.height properties. Note that these are numbers, not CSS values, so you would say "<canvas width='200'>", not "<canvas width='200px'>". Setting either value will immediately clear the canvas contents, and in fact is the easiest way to do so.
Like an <img>, a <canvas> element is displayed by default at its 'natural' size, i.e. its size in pixels, unless its CSS width and height are set to depend on the containing element (for example if you set width:100%).
I have created a custom control using Javascript where you swipe between icons and any time an icon is in the middle of the screen it gets replaced with a different image, the problem is sometimes the new image doesn't update, when I inspect the source I can see that my img tag has the new image set like in this screenshot:
(Note that the icon in the page is blue while it should be green as per the src)
After this point if I try to change the src of any image in the page using the console it won't work, the page Javascript still works fine but I can no longer change any image src.
This is the Javascript I use to update the image, note that I update the image class before I update the src.
// update selected item class
document.getElementById("scroll-item-" + selectItemId).className = "scroll-item-selected";
// update selected item image
var currentItemImageElement = document.getElementById("scroll-image-" + $scope.currentSelectItemId);
currentItemImageElement.src = currentItemImageElement.src.substring(0, currentItemImageElement.src.length - 11) + ".png";
// update selected image class
currentItemImageElement.className = "icon-img";
I would try preloading your images, either as:
a sprite, since you are adding classes
img tags in the DOM with display: none as a poor man's preloader
Then see if you still have issues. My initial thoughts are that your images have not been loaded and see you are seeing an artifact of that.
It's probably something silly, however, with the code I have right now, I can edit non spoilered pictures on the fly, so that their thumbnail is changed to the spoiler thumbnail.
$("[src='path/to/original/thumbnail.jpg']").attr('src', "/static/spoiler.png")
however, the new the thumbnail retains the size of the original thumbnail, and my spoiler image looks extremely strange unless it's at the correct size.
How do I set the thumbnails size, after being changed to the spoiler image?
Width needs to be 94px, and height needs to be 128px, for the record.
Depends on how the image originally got its height and width. If via css, then simply change the height and width using JQuery's ".css()" method:
$("[src='/static/spoiler.png']").css('width', '94px').css('height': '128px');
Or if height and width is set via an attribute:
$("[src='/static/spoiler.png']").attr('width', "94px").attr('height', "128px")
Don't set the src as an attribute, set the property directly:
$("[src='path/to/original/thumbnail.jpg']").each(function(){
this.src = "/static/spoiler.png";
});
I come from a Flash background (remember Flash :) but am pretty new to JS so be gentle.
I am building a carousel around a simple ul in which each li is an image.
I have an array of all the images in the list that I get using var list = $('#carousel li img');
If I examine list[0] in the console I see it is an HTMLImageElement and has both a width and clientWidth listed as 74 but if I try to get that width in my script (list[0].width, list[0].clientWidth, $(list[0]).width() etc) I just keep getting 0.
If I specify the width in the img tag then I get it ok but that just seems like extra typing unless there is a good argument for including it anyway.
You need to load the image before you can acces its dimensions.
Check out an image element's load event. Note that it can be difficult to get working with already cached images.
You can get around that by always dealing with a new img element (new Image will create one).