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. ☺
Related
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.
I want to apply lazy loading for one image with method .lazy() for a section with id. The section has configured background via CSS. Below is code:
HTML
<section id="showcase">
</section>
CSS
/* Showcase*/
#showcase {
min-height: 400px;
background: url("../img/example.jpg") no-repeat -300px -500px;
background-size: cover;
}
JS
<script>
$(function() {
$("#showcase").lazy();
});
</script>
How should I change the code? Because now it doesn´t work. It is working only when I have a code and a tag <img class="lazy" data-src="../img/example.jpg" /> as you can see in an example below:
http://jquery.eisbehr.de/lazy/example_basic-usage
According to the JQuery.Lazy docs and demos in their website, you could load background images by setting the data-src attribute to the element on which you want to load the background image.
So in your case you could do as follows:
<section id="showcase" data-src="../img/example.jpg"></section>
Then you will need to remove the background-image definition from the css style.
You can check their working example on their website.
In this JSFiddle, I have a button with an image in the background. If you click the button, a collapsed column springs out from the bottom.
What I'm looking to do is have that same background image dynamically re-size to fit the entire un-collapsed div once it's un-collapsed. Now, I understand that I could do a call like
$(this).addClass('imageUpdate');
when I want dynamically change the CSS for the header/button div, but this isn't exactly what I'm looking to do; I want the image to resize but to also map itself across the entire expanded column (and the header that it drops down from).
Is there any way that I can get around doing this? Or, as I suspect, can I not have an image span across multiple divs? If this is the case, what alternative would you recommend in order to achieve my goal? Thanks!
HTML
<div class="col-md-3" id="left-accordion">
<!-- first set of buttons -->
<div class="panel panel-default">
<div class="panel-heading" role="button" data-toggle="collapse" data-target="#baselayer">CLICK ME<br/>
<span style="font-size:1.25em;color:#fff;" class="glyphicon"></span>
</div>
<div class="collapse" id="baselayer">
<div class="well selections base-buttons" id="softbutton" role="button">Bulbasaur<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="medbutton" role="button">Charmander<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="firmbutton" role="button">Squirtle<br/>
<div class="selected">
</div>
</div>
</div>
</div>
</div>
CSS
.panel-default > .panel-heading {
color: #fff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}
You do not need any JavaScript, but move the background to the conatining <div class="panel-default">. Then you remove the background of the elements above and you're good.
Example
CSS:
.panel-default > .panel-heading {
color: red;
background: transparent;
}
.panel-default .well{
background: transparent;
}
.panel-default {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}
Once you're done, copy the image to your own server for production use, instead of referencing to the one on Wikimedia.
Or, as I suspect, can I not have an image span across multiple divs
You can have your image as large as you want.
You just have to tell it, how large it should be, by changing the style.width and style.height attributes. (or background-size in your case)
This is what i would do by JS.
But you want to do it automatically - so I would attach the background-Image to you bigger container .panel-default
But then, the buttons are in front of it, so you would have to change the background-color etc of them ...
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.
I have a large image that contains a button graphic. I don't want the whole image to be clickable, just the button graphic.
When the user clicks the button, a javascript alert message must fire. Can this be done using javascript and an image map?
Thanks!
sure, alternately you could just build a div that is the same size as the image and position a clickable area inside of it:
<div style="background: url(path/to/image.jpg); height: 200px; padding: 50px 0pt 0pt 50px;">
<a onClick="alert('Button Clicked!');" href="#">
<div style="height: 20px; width: 30px;"></div>
</a>
</div>
doable
you can hide the button under the image, could have some headache in positioning tho