I was following a solution in order to implement the html2canvas function. (How to show scrollable all contents of div in pdf using html2canvas)
The answer of one of the users is just working fine, when executing the respective function in jsfiddle.net (https://jsfiddle.net/dr4ewfa1/5/). However, after copying + pasting the same code in visual study, I don't receive any download files after clicking the button.
Do you have an idea, why this could be & how to solve this ?
My HTML file looks like this, the JS code is exactly the same as mentioned by the user #Nimitt Shah:
$(document).ready(function() {
$('#print').click(function() {
var currentPosition = document.getElementById("content").scrollTop;
var w = document.getElementById("content").offsetWidth;
var h = document.getElementById("content").offsetHeight;
document.getElementById("content").style.height="auto";
html2canvas(document.getElementById("content"), {
dpi: 300, // Set to 300 DPI
scale: 3, // Adjusts your resolution
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'px', [w, h]);
doc.addImage(img, 'JPEG', 0, 0, w, h);
doc.addPage();
doc.save('sample-file.pdf');
}
});
document.getElementById("content").style.height="100px";
document.getElementById("content").scrollTop = currentPosition;
});
});
body {
background: beige;
}
header {
background: red;
}
footer {
background: blue;
}
#content {
background: yellow;
width: 70%;
height: 100px;
margin: 50px auto;
border: 1px solid orange;
padding: 20px;
overflow-y:auto;
}
.html2canvas-container { width: 3000px !important; height: 3000px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js">
</script>
<div id="content">
<p>This is the element you only want to capture</p>
<p>This is the element you only want to capture</p>
<p>This is the element you only want to capture</p>
<p>This is the element you only want to capture</p>
<p>This is the element you only want to capture</p>
</div>
<button id="print">Download Pdf</button>
<footer>This is the footer</footer>
I also executed the following statement in the console/terminal: npm install --save html2canvas
Unfortunately i still didn't get any file.
Thanks in advance.
Edit: I realized, that I'm also not able to execute the code in here. maybe it's the same reason ?
Related
I'm trying to implement this background changer from removed after edits to my personal blog that only resides on my computer (not uploading to the internet), but I don't know what the js for it is? How would I go about adding it to my blog?
I know there's the:
<body style="background-image : url();">
in the html file later followed by the:
<img src="" onmouseover="document.body.style.backgroundImage = 'url()';" width="20" height="20">
Is there anything else besides the js?
Edit: It seems this only works with 12x12 gifs? When I put my own images into the url places, the bg change won't work.
2nd Edit: I found the problem. I had my imgs not named properly.
Here is something that toggles between two images on the background of a div.
let images = ['https://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery/1.jpg'];
var currentImage = 1;
let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) {
currentImage = currentImage == 0 ? 1 : 0;
event.target.style.backgroundImage = `url('${images[currentImage]}')`;
});
#myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}
<div id="myBackground"></div>
Here is a version using just CSS, but limited to mouse over, resets when you leave the element.
#myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}
#myBackground:hover {
background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
}
<div id="myBackground"></div>
Here is a version the adds a class to the CSS on mouseover.
let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) {
event.target.classList.add('myOverride');
});
#myBackground {
background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
height: 300px;
width: 300px;
border: 2px; solid red;
}
#myBackground.myOverride {
background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
}
<div id="myBackground"></div>
Your code will work just fine. No need of any other js code.
This is my first time working with TweenMax in JavaScript. I'm trying to make a function that will create a "Card" with rounded edges that will eventually hold images and text. For now I just want to make one with an image inside (clipping is irrelevant at this point), at a certain size and location inside one of my tags.
Right now, all that this does is display the image at (0, 0) no matter the x/y value, there's no scaling or clipping from the parent block, and there's no rounded edges or shadow. So pretty much I'm thinking either my TweenMax is not working, or I'm not doing something right.
cards.js
mainView = document.getElementById('mainView');
create_card(25, 25, "image.png");
function create_card(theX, theY, img){
//CARD VARS
cardElement = document.createElement('div');
cardElement.setAttribute('class', 'card');
cardImage = document.createElement('img');
cardImage.setAttribute('src', img);
cardImage.setAttribute('class', 'image');
//LAYOUTS
TweenMax.set(".card", {
position:'absolute',
display: 'block',
x: theX,
y: theY,
width:140,
height:140,
backgroundColor:'#ff0000',
borderRadius:2,
overflow:'hidden',
scale:1,
boxShadow:'5px 5px 5px #ff7f00'
});
//APPEND CARD TO STAGE
cardElement.appendChild(cardImage);
mainView.appendChild(cardElement);
}
In the body of the HTML:
<div id="wrapper">
<div id="mainView" class="mainView"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="javascript/cards.js"></script>
The CSS stylesheet (I think this might be irrelevant but to be thorough):
body{
background-color: #888888;
margin: 0 0 0 0;
}
#wrapper {
margin-left: 100px;
}
#mainView {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 100%;
background-color: #444444;
box-shadow: 0px 0px 10px #222222;
}
So, to compile this into a single question: Why isn't my TweenMax working?
I up-vote/mark answer to all who make valid answers and contribution :)
What worked for me was changing https to http in:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Like so:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Such a simple solution hahaha. I found this out quite a while ago, but maybe someone will find this useful :)
I am trying to get the dimensions of images on a page for further use with a custom 'lightbox' or sorts. However, when trying both a pure js method, and a jquery method, I get the output undefined on my variables. Why is this? Is it because of jquery load event? I tried both onload and ready.
Basically I need the full dimensions of the image to justify whether it should be loaded in a lightbox with a click event or not.
Update I am now able to get console feedback from the function now, however it's not providing me a dimension of the image.
$('.postbody').find('img').each(function() {
var img = new Image(), width, height;
$(img).load(function() {
width = $(this).width();
height = $(this).height();
console.log('Width: '+width+' Height: '+height);
});
console.log($(this).attr('src'));
img.src = $(this).attr('src');
});
#theater-box {
display: none;
position: fixed;
width: auto;
height: auto;
min-width: 1005px;
max-width: 1428px;
padding: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.90);
border: 2px solid rgba(255,255,255,0.4);
}
.postbody {
width: 90%;
height: 90%;
background: rgba(100,50,50,0.5);
}
.postbody * img {
width: 100%;
max-width: 1168px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theater-box"></div>
<div class="postbody">
<div id="someclass"><img src="https://e8zzxa.bl3301.livefilestore.com/storageservice/passport/auth.aspx?sru=https:%2f%2fe8zzxa.bl3301.livefilestore.com%2fy2pDapooeiISgUV7-ugpyADuRULJ_stpkiALbypYJHjNxrhUqcvRsZ6eRk4PiJlClABLOfByjulDSDLOMCEpHhggVkgvM4z5Gdq0Jo-C0e1pCU%2fMajipoorHighlands2.jpg&wa=wsignin1.0" /></div>
</div>
You are setting the variables asynchronously and getting it directly.
In pseudocode it is a bit like this:
Set the function to retrieve the width and height when the images loads
Display the width and height variables (not set yet)
The functions set in step 1 runs and sets the varaibles.
So your code that uses the width and height should be inside the image.load function.
I hope it helps, if you have any further questions dont hesitate to comment :-)
Perhaps you can just put the console.log line as the last line in the $(img).load function.
Try this...
$(img).load = function() {
var $this = $(this);
width = $this.width();
height = $this.height();
}
I'm not exactly sure why the original method (which works in a lot of examples) was not working here. So I found some awesome code by GregL from right here at Stackoverflow.
Essentially, the method loads a new, and hidden image into the body, and then captures the width and height before removing it.
$('.postbody').find('img').each(function() {
var img = $(this), width, height,
hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
width = hiddenImg.height();
height = hiddenImg.width();
hiddenImg.remove();
console.log('Width: '+width+' Height: '+height);
});
Check out the Fiddle
I'm using snap.svg
I have index.html
<!Doctype>
<html>
<head>
<title>MAP_TEST</title>
<meta charset="utf-8">
<script type = "text/javascript" src = "JS/jquery.js"></script>
<script type = "text/javascript" src = "JS/init.js"></script>
<script type = "text/javascript" src = "JS/snap.svg.js"></script>
</head>
<body>
<div class="comm_cont">
<div id = "svgborder">
<svg id = 'svgmain'></svg>
</div>
</div>
</body>
</html>
And init.js
$( document ).ready(function() {
var s = Snap("#svgmain");
var g = s.group();
Snap.load("SVGFILES/3k1e-test.svg",function(lf)
{
g.append(lf);
//trying to load picture... Scale button in future
$('<img />', {
src: 'PNG/plus.png',
width: '30px',
height: '30px',
id: 'buttoninrk'
}).appendTo($('.comm_cont'));
//this button must be on picture
//but in front of the picture svg element
//And i can't click the button
});
});
I played with z-indexes of #svgborder and #buttoninkr but it didn't help me.
How to put button in front of svg element?
#buttoninkr, #svgborder
{
position: absolute;
}
#svgborder
{
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninkr
{
z-index: 1;
}
Added css code with z-indexes.
There is a reason why i'm not using svg buttons instead jquery image button.
Ok, as you can see #svgmain in front of plus.png
http://jsfiddle.net/3wcq9aad/1/
Any ideas?
Solved
#svgborders
{
position: absolute;
background-color: #535364;
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninrk, #buttondekr, #home_btn
{
position: inherit;
top:0;
margin:10px;
z-index: 1;
}
#buttoninrk
{
right:0px;
}
#buttondekr
{
right:60px
}
EDIT: It wasn't the position of the div that made the difference, but simply adding a width and height. So the original HTML works fine as long as you add a width and height to svgborder in the CSS:
http://jsfiddle.net/3wcq9aad/4/
(Note that sometimes, the position of an element within a document can make a difference to how z-index works.)
If you put the svgborder div before the svg, then z-index will work, but you'll need to know the width and height of your SVG and set it on the svgborder div.
<body>
<div class="comm_cont">
<div id="svgborder"></div>
<svg id='svgmain'></svg>
</div>
</body>
#svgborder
{
z-index: 2;
width:330px;
height:150px;
...
}
Fiddle: http://jsfiddle.net/3wcq9aad/3/
svg does not support z-index
Use element position instead:
$('element').css('position', 'absolute');
Is there a way in jQuery to bring a div to front?
I have a div which is pretty overflowed. It basically includes a big organization chart. What I want to do is exporting whole content of div rather than visible part with html2canvas library but I couldn't achieve it so far. Following piece of code doesn't render full content. Is there a way to achieve it?
function export(){
html2canvas( [ document.getElementById('diagram') ], {
onrendered: function(canvas) {
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800, height=800");
//Canvas2Image.saveAsPNG(canvas);
}
});
}
I am using BasicPrimitives library to generate organization charts. It takes a div and insert all elements to it. Since my chart is moderately big, it overflows from its container.
Xhtml code is as follows:
<rich:panel style="float: left; width: 100%;">
<div style="float: left; height:600px; margin-left: 1%; width: 19%; border-style: dotted; border-width:1px;">
Some irrelevant content
</div>
<div id="diagram" class='diagram' style="float: right; height:600px; width: 59%; border-style: dotted; border-width:1px;">
This is the div all charts are dynamically inserted
</div>
<div style="float: left; height:600px; margin-left: 1%; width: 19%; border-style: dotted; border-width:1px;">
Some more irrelevant content
</div>
</rich:panel>
I don't know if there's a straightforward option in html2canvas to do this (i.e. an option to set all overflow to visible) but a roundabout way might be to set the parent of the diagram element's overflow property to visible when your export function is called, then set it back to hidden again on html2canvas' onrendered callback so that the user has minimal time to perceive it:
function export(){
document.getElementById('diagram').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly.
html2canvas( [ document.getElementById('diagram') ], {
onrendered: function(canvas) {
document.getElementById('diagram').parentNode.style.overflow = 'hidden';
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800, height=800");
//Canvas2Image.saveAsPNG(canvas);
}
});
}
Give a try to dom-to-image, it works better for me since I have to set specific size, and show and element that hides for some screen size:
function convertCanvasAndSend(idElement, nameImage) {
var element = document.getElementById(idElement);
var styleOrig = element.getAttribute("style");
element.setAttribute("style", "width: 1400px; height: 480px;");
element.querySelector("ANY_HIDDEN_YOU NEED").setAttribute("style", "display: block;");
domtoimage.toBlob(element)
.then(function (blob) {
window.saveAs(blob, nameImage + '.png');
element.setAttribute("style", styleOrig);
element.querySelector("ANY_HIDDEN_YOU NEED").setAttribute("style", styleOrigInnDiv);
});
}