<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?
I have some algorithm to resize it independently
I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily:
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';
as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
</div>
</div>
If using only height or width, the other attribute is calculated to respect the image proportions.
Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.
Cheers
If your goal is to resize proportionally, why not resize using CSS percentages?
CSS:
.smaller {
width: 80%;
}
Your Code:
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
you can get/set the height and width properties with angular.element("selector").height or width.
How do I crop my selected picture?
I've written web page that gives the user a choice to replace their current picture with a picture inside a carousel.
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="Pictures/PhotoAlbum/90.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
</div>
</div>
When I click on the images in the carousel the ZoomAvatarPicture is replaced, as I expect it. I want to crop the newly selected ZoomAvatarPicture image. I've tried 3rd party cropping software (e.g. jQuery rcrop and imgAreaSelect) but their cropped images are of the original image, 203.jpg)
This is the code I added for rcrop:
jQuery(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
preserveAspectRatio: true,
minSize: [50, 50],
inputsPrefix: '',
grid: false,
});
$('#ZoomAvatarPicture').on('rcrop-changed', function e() {
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
})
});
And then I had a div to hold the cropped image
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
Since I got the same results for rcrop and imageSelect it leads me to believe that the problem isn't in the software but in my understanding of what can be done in jQuery.
Also, the demo page for rcrop is here: http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/
I've added this code
function rcrop_Avatar()
{
var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
alert('src = ' + $('#ZoomAvatarPicture').attr('src') );
}
function resetListener()
{
$('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
rcrop_Avatar();
}
jQuery(document).ready(function () {
App.init();
App.initScrollBar();
Datepicker.initDatepicker();
OwlCarousel.initOwlCarousel();
CirclesMaster.initCirclesMaster1();
StyleSwitcher.initStyleSwitcher();
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
$('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});
and modified the HTML to this:
<div class="item">
<img src="Pictures/PhotoAlbum/Work/90.jpg" onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>
I'm still getting the same results. (i.e. the cropped image is the original image, not the newly selected one).
The entire process is in a bootstrap modal. I'm starting to think I should forgo this route and put everything into a tabbed series of iframes.
Apparently, rcrop doesn't like to change properties or subject on the fly, and the destroy method is pretty messy, as it sometimes deletes the original object or leaves the preview display behind.
So, to avoid that, I changed a bit the behaviour to delete the remains and then recreate the image and attach it to the rcrop again.
Due to the size limit of the answers and not being able to upload the js and css of rcrop, i made this Codepen: http://codepen.io/LordNeo/pen/XpxVVv
Here is the relevant parts so you can check for modifications, for working example see the above CodePen.
$(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
});
function changeImage(imgsrc) {
$('#ZoomAvatarPicture').rcrop("destroy");
$('#ZoomAvatarPicture').remove();
$('.rcrop-preview-wrapper').remove();
$('.rcrop-wrapper').prepend('<img id="ZoomAvatarPicture" src="'+imgsrc+'" height="200" />');
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
}
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG1" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4')"/>
</div>
</div>
I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.
I am basically trying to build a 3D Cube and having trouble with the translateZ property. I want to get the width of the browser and store it into the translateZ for a particular element. This will create the 3D cube responsive even when the browser is being re-sized. I want it to store the value as it works with the .auto-size
resizeDiv();
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.auto-size').css({'height': vph + 'px', 'width': vpw + 'px'});
$('.full-z').css({'transform': 'translateZ' ( vpw + 'px' ); });
}
The translateZ value is given to a css class so i can use that multiple times for different divs. My markup is as follows
<div class="viewport">
<div class="cube">
<div class="cube-side1 auto-size cube-face" id="front">
</div>
<div class="cube-side2 auto-size cube-face full-z" id="back">
</div>
<div class="cube-side3 auto-size cube-face" id="left">
</div>
<div class="cube-side4 auto-size cube-face" id="right">
</div>
<div class="cube-side5 auto-size cube-face" id="top">
</div>
<div class="cube-side6 auto-size cube-face" id="bottom">
</div>
</div>
</div>
It works with the widths and heights but not with the transform property. I have very little knowledge of jQuery.
This is my code
<div data-role="page" id="callAjaxPage">
<img id="logo" src="images/logo.JPG" alt="logo" />
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<form id="callAjaxForm" data-ajax="false">
<div data-role="fieldcontain">
<label for="userName" id="userNameLabel">Username</label> <input
type="text" name="userName_r" id="userName" value="" /> <label
for="password" id="passwordLabel">Password</label> <input
type="password" name="password_r" id="password" value="" /> <br />
<button data-theme="b" id="submit" type="button">Submit</button>
</div>
</form>
</div>
</div>
In this code i have an image which is the logo. I Just need to reduce the height of the image. What i have tried is manually setting the height to say 150px but what happens is that the height gets reduced but my width also reduces. Even if i hardcoded my width, still it reduces. The problem maybe the image is small.I also tried placing it in a div and i manually set the corresponding height and width but the div concept cuts the image. I dont want the image to be cut or something.I just want it to shrink in height. I dont care about the quality. How to do it?
Reducing the height is doing what almost anyone wants - keeping the aspect-ratio when you change the height. If you need to keep the width, change the width AND the height to the height it was with the desired width
for example DEMO
$(document).ready(function() {
var img = $("#logo");
var width = img.width();
alert(width);
img = $('<img height="250" width="'+width+'" alt="'+img.attr("alt")+'" src="'+img.attr("src")+'"/>')
$("#logo").replaceWith(img);
});
You can either do this in CSS.
#logo {
width: 80px;
height: 30px;
}
Or if you want to resize the image dynamically with javascript.
$("#logo").attr("width", $("#logo").width());
$("#logo").attr("height", 30);
You can set separately width and height using the style attribute.
For example :
<img style="height:40px;width:300px;" src=0NfSJ.jpg>
You just specify the width and height attributes, and the image will be displayed in that size:
<img id="logo" src="images/logo.JPG" alt="logo" width="300" height="20" />
Here is a demo of a 5x5 image displayed as 300x20: http://jsfiddle.net/Guffa/A9pAP/