I have been looking for an answer on how to save a div as an image when I click save. I have looked everywhere but I cant seem to find an answer, I am using DIV and a preview button to convert the div into an image. The closest thing that i found to save as an image was http://jsfiddle.net/epistemex/kyjs655r/ this is close to what i need to save as an image, but the problem is that this is canvas and its not working with my code this is very similar to what I have my code is messy this is very similar https://jsfiddle.net/8ypxW/3/ I would like to integrate the save from the first URL to the second URL.
This is my script it is similar to the second URL
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});
var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
.container {
background-color: transparent;
width: 490px;
height: 500px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center>
<span id="texter" class="text" data-bind="text:$data"></span>
<input class="edit_text"/>
</center>
</div>
</div>
<a href="" download>
<span id="image" class="preview-area"></span>
</a>
</div>
</div>
</center>
<br><br><br><br>
</div>
</center>
<br/>
</center>
</div>
</div>
<center>
<div id="previewImage">
</div>
</center>
The above code is supposed to have an image but I didn't want to add it because that will need more code I want to keep it short and simple inside their is a text box and I want to save the whole div as an image on click just like the first URL
There is several same questions in SO. Saving Div Contents or Canvas as Image
How to take screenshot of a div with JavaScript?
One way of doing it is using canvas. Working solution is http://html2canvas.hertzen.com/
Here you can see some working examples of using this library
Use this library. ..
https://html2canvas.hertzen.com
Now just select the element and size.. it will take a snapshot as image..
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
Related
I have an IFrame source (JQuery-UI Datepicker) embedded inside a DIV. When the user clicks inside the iframe to select a date, the iframe should grow in width and height to accomodate the height of the datepicker-calender. Once date picking is done, the IFrame should come back to its original size.
JSFiddle : https://jsfiddle.net/Jersey_Guy/yoc9jewv/
$(document).ready(function() {
//debugger;
var $w = $(window),
$dateframe = $("iframe[src*='jqueryui']");
$dateframe.blur(function() {
console.log("Called Resize");
$(this).width = 100;
$(this).height = 100;
}).resize();
$dateframe.click(function() {
console.log("Called Resize");
$(this).width(200);
$(this).height(400);
}).resize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color: rgba(255, 255, 255, 0); width: 474px; height: 127px; top: 5px; left: 3px;">
Outer Div
<div class="tab-web tab-widget fade-in">
Inner Div
<div style="position: absolute;">
IFrame Floater Div
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 200px; height: 80px; top: 0px; left: 0px;">
</iframe>
End IFrame Div
</div>
End Inner Div
</div>
End Outer Div
</div>
Do I need to set the div size along with the IFrame size?
Where am I going wrong?
I think you can do this by working on divs instead of the iframe.
I modified your fiddle here: https://jsfiddle.net/bkelley13/faLeucpp/1/
var dateframe = $("#myframediv");
$(document).click(function() {
dateframe.width(100);
dateframe.height(50);
dateframe.resize();
});
dateframe.click(function(ev) {
$(this).width(400);
$(this).height(200);
ev.stopPropagation();
}).resize();
and
<div id="myframediv" style="background-color:yellow">
IFrame Floater Div
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html">
</iframe>
So if you click in the iframe div, it resizes, and if you click outside it, it resizes. (I don't know about target jqueryui page, datepicker doesn't seem to bubble up the click event.)
Solved it ! The click and blur functions not triggering were the problem. Had to use the mousenter and mouseleave along with jquery animate function to get the iframe to expand and contract.
Here is my code: https://jsfiddle.net/Jersey_Guy/4zja94j4/
$(document).ready(function() {
//debugger;
var $w = $(window),
$dateIframe = $("iframe[src*='jqueryui']"),
$dateInnerDiv = $("#myframediv");
$dateIframe.mouseleave(function() {
console.log("Called Iframe Reduce");
$(this).animate({
width: "190px",
height: "90px"
}, 500);
//Optional: slow down the exit to 500 ms in case user changes their mind
});
$dateIframe.mouseenter(function() {
console.log("Called Iframe increase");
$(this).animate({
width: "390px",
height: "290px"
}, 0);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color:white; width: 500px; height: 300px; top: 5px; left: 3px;">
Outer Div
<div class="tab-web tab-widget fade-in" style="background-color:gray;">
Inner Div
<div id="myframediv" style="position: absolute; background-color:yellow;">
IFrame Floater Div before
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 190px; height: 90px; top: 0px; left: 0px; background-color:orange;">
</iframe> End IFrame Div after
</div>
End Inner Div
</div>
End Outer Div
</div>
I am using Dreamweaver for the first time to code. I am intermediate in HTML.
I've been trying to use a png file as a button. I've found some sources stating that a ...
<button src=Home_button> </button>
... will work, but I have tried it, and to no avail, it does not work. Any suggestions?
NOTE:
I am also using a CSS to build this Very basic website.
Just add background-image to your button.
<button id="home_button">click me</button>
and then add:
#home_button {
background-image: url(...);
}
You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.
Here's a working demo as well:
#home_button {
width: 150px;
height: 150px;
background-image: url('http://i.stack.imgur.com/sfed8.png');
background-size: cover;
background-color: #eee;
}
<button id="home_button"></button>
You can add an img tag inside your button tag.
<button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>
There are many ways to create something that looks like an image and behaves like a button.
Here-below are code examples demonstrating 5 options worth considering...
Option 1 :
You could put an <img> element inside a <button> element :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
button, img {
padding: 0;
font-size: 0;
border: none;
}
<button id="myButton">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</button>
(see also this Fiddle)
Option 2 :
You could use an <a>-tag instead :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
a {
border: none;
display: inline-block;
font-size: 0;
}
<a id="myButton" href="#">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</a>
(see also this Fiddle)
Option 3 :
You could just attach your click handler directly to your image :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
<img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
(see also this Fiddle)
Option 4 :
You could set your image as a background-image of a <button>-tag or other tag that represents a button.
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
input[type=submit] {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<input type="submit" id="myButton">
(see also this Fiddle)
Option 5 :
You could set your image as a background-image of an <a>-tag, a <div>-tag or another tag that doesn't represent a button :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
div {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<div id="myButton"></div>
(see also this Fiddle)
You could do <img src="#" alt="" /> to achieve what you want.
There are several ways to use an image as a button..
<a href="your_link.html">
<img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
</a>
css..
#mypic {
background: #390239;
color:#7e4a00;
border:#7e4a00 2px solid;
border-color:;
outline:none;
padding: 6px;
border-radius:5px;
text-align: center;
}
Chris also has a good answer... it depends on what looks good on the page, as well as your coding knowledge.
Here's what you can do...
HTML
<button>Click Me</button>
CSS
button {
display: inline-block;
height: 50px // height of your button image
text-indent: -9999px // hide if you have text inside <button>
width: 100px // width of your button image
}
Hope this will help :)
I have created website which code can be found here: https://jsfiddle.net/7y373j8x/2
I have created a box which appears when clicking on "Portfolio". (The box is called "object2").
I want to insert PNG images inside of this box. Some have suggested to me to do a jQuery slider but I don't want a slideshow. I want the images to be placed next to each other (as thumbnails) and then the user can click on an image and it should become bigger.
HTML:
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />
<div class="container">
<p>About me</p>
<div id="portfolio" onclick="show();">Portfolio</div>
<p>Contact me</p>
<div id="object2" onclick="show();">
</div>
</div>
CSS:
#map {
background-attachment: fixed;
}
.container {
color: yellow;
position: fixed;
top: 54%;
left: 58px;
font-family: normal normal 15px Calibri;
}
#object2 {
border-radius: 15px 50px;
background: black;
position: fixed;
bottom: 200px;
right: 400px;
width: 650px;
height: 350px;
cursor: pointer;
display: none;
z-index: 999;
opacity: 0.4;
}
JavaScript:
function show() {
document.getElementById("object2").style.display = "block";
}
you can append the images using javascript or jquery.
update your show() method like this.
function show(){
document.getElementById("object2").style.display = "block";
var image = new Image();
image.src = 'https://placehold.it/350x150';
var image1 = new Image();
image1.src = 'https://placehold.it/200x100';
$('#object2').html('');
$('#object2').append(image);
$('#object2').append(image1);
}
here's the updated JSFIDDLE for the same. hope it helps.
The reason why your function is not working is because onclick operates within the page scope so it can't execute any functions outside of it.
If I moved the script within the same scope, it will work as you can see here:
JavaScript jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/60/
( I have replaced your style.display = "block" with .style.cssText = 'display: block'; )
jQuery Approach
If you are interested in using jQuery, here is a cleaner and easier jQuery approach to modifying css properties with js:
$("#portfolio").click(function(){
$("#object2").css("display", "block");
});
jQuery jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/58/
I want to create a popup/div at a specific location on the screen like image below
Say it should start after edit button and its position should be exactly the same as shown in the image.
Check out my JSFiddle that I made for you. This is quite simple to do. This example requires JQuery though, but if you fiddle around: I'm sure it can run without it as well :)
HTML:
<div id="box1">
This is box 1
<br />
<button onClick="openEditBox();" id="editButton">Edit</button>
</div>
<div id="box2" style="display: none;">
This is the edit box...
<br />
Edit stuff goes here...
</div>
JavaScript:
$(document).mouseup(function (e) {
var container = $("#box2");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
function openEditBox() {
var editButtonPosition = $("#editButton").position();
$("#box2").css({top: editButtonPosition.top + 20, left: editButtonPosition.left});
$("#box2").show();
}
CSS:
#box1 {
background-color: #AAA;
border: 1px solid #333;
padding: 10px;
width: 200px;
}
#box2 {
background-color: lightblue;
border: 1px solid #333;
padding: 10px;
width: 200px;
z-index: 1000;
position: fixed;
left: 0;
top: 0;
}
Run it live on JSFiddle to test it out and see how it works:
http://jsfiddle.net/fpde7by8/
About the down votes: People here seem to hate simple questions... But I don't see the problem. Everyone was a beginner at some point.
The popup div should be the child of the first div(maybe the Edit button's div) , set the first div position:relative, the popup div position:absolute, so the popup's position is relative to the first div,then you can use code like this : 'left:50px;top:50px;'
I just started using cropit, and I'm having some problems.
I've tried to find the best way to submit a cropped image, and I found that it's really hard to find a definate answer, even when googling on this.
Here are my thoughts so far:
Way 1
Get the position from js, submit that new position and crop it, from the new position, I got from js.
Way 2
Submit the base64 version of the cropped image as a hidden form element. I'm afraid that I wont be able to get the full image this way though, since the preview (where you crop the image), is smaller than the final image should actually be.
Any ideas on what would be the best way to get the cropped image?
$(function() {
$('.image-editor').cropit({
imageState: {
src: 'http://lorempixel.com/500/400/'
}
});
});
.cropit-image-preview {
background-color: #f8f8f8;
background-size: cover;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 7px;
width: 275px;
height: 102px;
cursor: move;
}
.cropit-image-background {
opacity: .2;
cursor: auto;
}
.image-size-label {
margin-top: 0.6rem;
}
<script src="http://scottcheng.github.io/cropit/scripts/vendor.js"></script>
<form>
<div class="image-editor">
<label>Cover Image</label>
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<p class="help-block">Optimal size is 550x203.</p>
</div>
<input type="submit"/>
</form>
cropit library can be found here: http://scottcheng.github.io/cropit/
Cropit author here. Hope it's not too late.
I'd suggest submitting the cropped image in a base64 encoded format in a hidden input. Regarding your concern about exported image size/quality, cropit provides an option exportZoom, which allows you to specify a ratio between the size you would like an exported image to be and the preview div. Please see the doc for more details (search "exportZoom" in the page).
I was looking for this as well. Figured to pass image value through an hidden input but got stuck on saving the image, so for everybody who is interested, this is the code I ended up using:
$saveImage = 'NAMEOFTHEIMAGEFILE.png';
$data = $_POST['DATAURI'];
list($t, $data) = explode(';', $data);
list($t, $data) = explode(',', $data);
$src = base64_decode($data);
file_put_contents('/'.$saveImage, $src);
$(function() {
$('.image-editor').cropit({
imageState: {
src: 'http://lorempixel.com/500/400/'
}
});
});
.cropit-image-preview {
background-color: #f8f8f8;
background-size: cover;
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 7px;
width: 275px;
height: 102px;
cursor: move;
}
.cropit-image-background {
opacity: .2;
cursor: auto;
}
.image-size-label {
margin-top: 0.6rem;
}
<script src="http://scottcheng.github.io/cropit/scripts/vendor.js"></script>
<form>
<div class="image-editor">
<label>Cover Image</label>
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<p class="help-block">Optimal size is 550x203.</p>
</div>
<input type="submit"/>
</form>