Why does image file input gets displayed sideways (flipped)? - javascript

So I currently got a component in Vuejs where the user can select a file from their local file system. After the user selected an image, the image gets previewed in a div codesandbox. For some reason, some images get 'flipped' sideways automatically. Mainly images from mobile phones where the height is much longer than the width.
<div
id="capture"
class="image-input"
:style="{ 'background-image': `url(${img})` } "
#click="chooseImage"
>
<span v-if="!img" class="placeholder">
<i class="el-icon-plus avatar-uploader-icon"></i>
</span>
<input type="file" ref="fileInput" #change="previewImage">
</div>
.image-input {
display: block;
width: 150px;
height: 150px;
cursor: pointer;
background-size: cover;
background-position: center center;
margin-bottom: 20px;
}
In the codesandbox you can upload an image and a preview is shown. I've also included img2 in the data property. If you set :style="{ 'background-image': `url(${img})` } " to img2 you can see what I mean. Basically: gyazo
How can I display the image properly? Not flipped.

The image is actually rotated and your software is rotating it back using metadata hints.
You should either physically rotate the image, or use a css transform.

Related

HTML div formatting: three images that dynamically match viewport size (image slider)

I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click

Zoom on image inside div after resizing the image

Im trying to put an image with high resolution into div.
to do that, i used the property max-width / max-height on the image and it fit perfectly.
right now i want to add button - when clicking on button, I would like to zoom in the image without getting out of div's borders - in other words, I would like that the picture dimension will grow up inside the div with scrolles.
the problem is that the zoom property doesnt work so good - I guess its because the max-width I used on the image in order to resize it.
How can I get those 2 demands together?
Here is the code:
<div id="maps-content" class="maps-content">
<div id="map-frame">
<img src="images/empty_diagram.png" />
</div>
<div id="img-buttons">
<asp:Button ID="zoom_in_btn" runat="server" Text="Zoom In" OnClientClick="ZoomIn();return false;" />
<asp:Button ID="zoom_out_btn" runat="server" Text="Zoom Out" OnClientClick="ZoomOut();return false;" />
</div>
</div>
div#maps-content {
height: 90%;
background-color: blue;
}
div#map-frame {
/*position: relative;
height: 90%;*/
background-color:darkgoldenrod;
}
div#img-buttons {
/*position: relative;
height: 10%;*/
background-color:red;
}
div#map-frame img {
max-width: 100%;
max-height:100%;
}
Thank you
For example, If you use a div within id="div1" and the image is inside it,
and you dont want to get out the border of the div,
simply use the overflow code, for ex.
#div1{
overflow:hidden;
}
This will hide all the content outside the div1.
Please provide a code, or screen snap so we can help.

div to image to download

i have problem puting div in the image. The thing is that I want to make div as downloadable (right click, download as image OR on button). This is my div which i want to be "downloadable"
<div style="display: block; background-color: transparent; background-repeat: no-repeat; background-image: url("images/fujairah-plates.png"); background-size: contain; min-height: 90px;" class="" id="plate">
<div id="plate2"></div>
<div class="letter-left draw_code" id="draw_code"> B</div>
<div class="letter-right draw_num" id="draw_num"> </div></div>
I hope for some constructive suggestions.
You can use HTML2Canvas JS library to convert the HTML into a canvas and after that, you can export the canvas to data URI using the toDataURI() JavaScript function. That data URI string can be then presented as a downloadable image.
P. S: I've tried it and it works perfectly. ☺

Only load lightbox image on click - Reduce page loading time

I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.
With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.
The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.
A link to the page:
http://agentboris.com/press/index-2.php#_
Here is the HTML for the image that includes the lightbox effect and lazy-loading:
Click to View
<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">← BACK <br/></p>
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>
And the CSS:
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display:none;
/** Position and style */
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 10000px;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
/*max-width: 90%;*/
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
position: fixed;
top: 0;
left: 0;
/** Unhide lightbox **/
display: block;
}
Simply use lazySizes. Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src):
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">
lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).
Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img?
Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.
Also, since you've named all of your images (big) with the suffix of -thumb, you don't really need to make an API call.
HTML
<div class="presscoll">
<a href="#boris-2014-awards" class="show-lightbox">
<img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
</a>
..... more thumbnails
</div>
Only have (1) of these.
<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
<br /><p class="parastyle" style="letter-spacing: 0.05em;">← BACK <br/></p>
<img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
</a>
$('.presscoll').on('click' 'a.show-lightbox', function(e) {
// get src and remove "-thumb"
var src = $(this).find('img').attr('src');
src = src.replace('-thumb', '');
// change image attr
$('#show-lightbox').find('img').attr('src', src);
// may need to call lightbox initialize again here
});
Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.
This isn't tested btw, but the idea will work.

Node server is returning rotated images when I use background-image

I have an application with node.js, and some images are stored in the server, but for some reason, when I search the image in my browser, looks good like:
http://myurl.com/uploads/40884269-6854-9480-1a38-dc5744ad5d62.jpg
but when I use the same image but with a css rule like:
<div class="upload-grid" style="color:white; font-size:1em; text-align: center; background-color: #727272; background-image: url (http://myimage.jpg) !important;" >
</div>
the image is rotate.
How I can fix it?

Categories