I have this code below that contains a simple hello world html page i'm trying to use the library html2canvas to try to download the canvas but it doesn't seem to be working i'm following a tutorial i saw but it doesn't work am i doing something wrong below? Any help would be greatly appreciated.
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#match-button').attr('href', canvas.toDataURL('image/png'));
$('#match-button').attr('download', 'Test.png');
$('#match-button')[0].click();
});
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
</body>
</html>
First of all. If test is an id of some element, jQuery syntax requires # before it.
$('#test')
Then, html2canvas onrendered option is deprecated. Use then() method instead as described on the official site https://html2canvas.hertzen.com/. I could not find test element in html snippet from the question, so I added it after the match-button. The modified code looks like this:
<script>
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
</script>
...
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
<a id="test" href="#"></a>
Related
When hovering over the picture, hide information about the link that will appear at the bottom left. When adding this script, the image became unclickable. I think the main problem is the incorrect connection of the js file or the execution of this script. I have added the code of 3 files below
openUrl(url: string): void {
window.open(url, '_blank');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roshan Timing</title>
<script src="eel.js"></script>
<link rel="icon" type="image/ico" href="/Roshan.ico"></link>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- TIMER -->
<p class="timer">Timer</p>
<!-- CHAT(INPUT) -->
<!-- created by dankYbat -->
<div class="about_right">
<div class="text_wrap">
<p class="noselect">created by dankYoff</p>
</div>
<!--Connect js to tage image -->
<div class="image_wrap">
<a><img src="github.svg" (click)="openUrl('https://github.com/dankYoff')" width="50"></a>
</div>
</div>
</body>
</html>
You can not use openUrl(url: string): void in a *.js file, looks like you want to use TypeScript. If you want to create a faster vanilla typescript project you can use vite.
Anyway the a solution can be this:
const imgProfile = document.querySelector('#img-profile');
const openUrl = (url) => {
window.open(url, '_blank');
};
imgProfile.addEventListener('click', () => {
openUrl('https://github.com/dankYoff');
});
.img-profile {
cursor: pointer;
}
.img-profile img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
transition: 0.3s;
}
.img-profile img:hover {
transform: scale(1.1);
}
<a class="img-profile" id="img-profile">
<img src="https://cdn.pixabay.com/photo/2022/09/16/13/07/woman-7458584_960_720.jpg" />
</a>
here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764
I want to change an image on a click but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/build/tailwind.css" />
<title>Document</title>
</head>
<body class="bg-black">
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
<lottie-player
src="https://assets7.lottiefiles.com/private_files/lf30_vAtD7F.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay
id="img"
onclick="change()"
>
</lottie-player>
<script src="../js/index.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
</body>
</html>
function change() {
document.getElementsByName('lottie-player').src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
}
I got this error, on the console:
Using onclick attribute is considered as a bad practice. Instead, use addEventListener().
And note that, getElementsByName() returns a collection of all elements in the document with the specified name.
document.getElementById('img').addEventListener('click', function() {
this.src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
});
I'm try to load the page content via the JQuery load() method.
Here is the code
$(window).ready(function() {
$('#content').load('views/login.html');
});
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
(Sorry but i can't add the login.html to the snippet editor. It's a login form powerd by the mdl framework:/)
Now the Javascript functions for the form element from mdl does not work correctly. There are no errors in the developer console. I've also tried to reload all my javascript files after the load request by jquery?
Does anyone have any idea what's going wrong with my script?
I've solved this problem by myself. Here the solution:
I simply call the mdl javascript after the load method again.
$.getScript('https://code.getmdl.io/1.3.0/material.indigo-blue.min.css');
Now it works perfectly. Thanks to all!
if code you provided is copied from your .html file then structure is not good.
Here is working version:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
</style>
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#content').load('views/login.html');
});
</script>
</body>
</html>
CSS styles needs to be enclosed with tags, and Javascript code must be closed within tags
Hope this helps you.
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.