I am taking a screenshot of a div in php using html2canvas. Script
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
function genScreenshot() {
html2canvas(document.getElementById('screen1'), {
onrendered: function(canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').val(canvas.toDataURL("image/png"));
document.getElementById("screenshot").submit();
}
}
});
}
</script>
it is working fine with desktop
With mobile it takes screenshot worngly
Help me to sort out the issue
Related
We are using jsPDF in aspnet core app. Here is the scripts section:
#section Scripts{
<script src="~/lib/jsPDF/jspdf.min.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/split_text_to_size.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/standard_fonts_metrics.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/html2canvas.min.js" asp-append-version="true"></script>
<script src="~/lib/jsPDF/html.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/js/dailyjobreport.js" type="text/javascript" asp-append-version="true"></script>
}
The html is received from AJAX call, and is used for pdf rendering
function onSuccess(data) {
try {
var pdf = new jsPDF({
orientation: 'portrait',
format: 'a4'
});
pdf.html(data);
pdf.save('report.pdf');
} catch (e) {
console.error(e);
}
}
The pdf that is rendered is a balnk page. Can anyone please help find us what's wrong with the code or if we are missing something
Try to use callback function to save to pdf :
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Js function :
$(function () {
var pdf = new jsPDF({
orientation: 'portrait',
format: 'a4'
});
pdf.html("<html><head></head><body><h2>2asdasda123dsdasd</h2></body></html>", {
callback: function (pdf) {
pdf.save('test.pdf');
}
});
})
I am making a Python editor in HTML and JavaScript, with CodeMirror for code indentation, line numbering and syntax coloring, and Skulpt for the execution.
I have some code that had an external script referenced in it (http://www.skulpt.org/static/skulpt.min.js):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript">
</script>
<script src="skulpt-stdlib.js" type="text/javascript">
</script>
<script src="codemirror.js" type="text/javascript">
</script>
<script src="python.js" type="text/javascript">
</script>
<link href="codemirror.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<script type="text/javascript">
var editor;
function outf(text) {
var mypre = document.getElementById("dynamicframe");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
function runit() {
var prog = editor.getDoc().getValue();
var mypre = document.getElementById("dynamicframe");
mypre.innerHTML = '';
Sk.pre = "dynamicframe";
Sk.configure({
output: outf,
read: builtinRead
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'canvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
//<![CDATA[
window.onload = function() {
editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
mode: {
name: "python",
version: 2,
singleLineStringErrors: false
},
lineNumbers: true,
indentUnit: 4
});
} //]]>
</script>
<textarea id="textbox" name="textbox"></textarea>
<br>
<button onclick="runit()" type="button">Run</button>
<pre id="dynamicframe"></pre>
<div id="canvas"></div>
</body>
</html>
I want all the scripts stored locally (excluding jQuery), so I copied over http://www.skulpt.org/static/skulpt.min.js to the local server and called it skulpt.min.js. I then changed the line:
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript">
</script>
to...
<script src="skulpt.min.js" type="text/javascript">
</script>
and now the code is bringing up this error in the console:
Uncaught ReferenceError: Sk is not defined
on line 38 of the HTML:
Sk.pre = "dynamicframe";
Why is this happening and how can I fix it?
I have a big problem,
please help me !
This is my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#show_button").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
$("<img/>", {
id: "image",
src: canvas.toDataURL("image/png"),
width: '95%',
height: '95%'
}).appendTo($("#show_img").empty());
}
});
});
});
</script>
</head>
<body>
<h1>test</h1>
<button id="show_button">Show Image</button>
//this is a problem
download
<div id="show_img"></div>
</body>
</html>
If my viewpoint is correct .
To save image,the download need the correct file path and file name.
And i use the html2canvas.js , convert the target into image .
But when i want to save the image , i don't know the correct file path and file name.(Because the image is dynamic file ,not a static file?)
How can i get the correct value to save this image?
Thank you!
OK, I've discovered canvas2image.js that does what you need with this function
downloadPNG = function () {
html2canvas(document.body, {
onrendered: function (canvas) {
Canvas2Image.saveAsPNG(canvas);
}
});
}
Here is a fiddle
http://jsfiddle.net/link2twenty/w8Lk3znf/
Use html2canvas it will convert html to canvas and use canvas2image packages to convert canvas to image (or) you can pass canvas data .toDataURL("image/png");
example:
var imagename = '<YOUR_IMAGE_NAME>';
var link = event.target;
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png");
downloadImageFormat(link, canvasData, imagename);
function downloadImageFormat(link, canvasData, imagename) {
link.href = canvasData;
link.download = imagename;
}
Here is fiddle demo
Just Use html2canvas library just include plugin and call method to convert HTML to Canvas then download as image PNG
html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "manpower_efficiency.jpg";
link.href = canvas.toDataURL();
link.target = '_blank';
link.click();
});
Source: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
In line 10, I have insert getSuggestion(q); for me to get results from my database but it does not work.
What should I put there in order for me to retrieve results from database while other codes remain the same?
This is my current code:
<html>
<script type="text/javascript" src="javascript/hogan-2.0.0.js"></script>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
getSuggestion(q);
});
});
</script>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
</html>
Thanks in advance.
Replace
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
getSuggestion(q);
});
});
</script>
with this:
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
name: 'q',
remote: '/suggestion.php?q=%QUERY',
minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
limit: 10 // show only first 10 results
});
});
</script>
And that's all you need. Typeahead does the rest.
Query is in $_GET['q']
You can find my example here
My index.php looks like this:
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/main.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
name: 'q',
remote: '/typeahead/suggestion.php?q=%QUERY',
minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
limit: 10 // show only first 10 results
});
});
</script>
</head>
<body>
<input type="text" class="q typeahead tt-query" />
</body>
You dont need css file or classes to input. Only class "q" is needed.
<input type="text" class="q" />
And suggestion.php source:
<?php
$q = $_GET['q'];
echo json_encode(array($q));
?>
As you can see, whetever you currently search, it answers with the same result as you typed. You have to make database query and echo array with json_encode
Remember to add correct url to remote parameter.
EDIT: My example now gets data from itunes and searches for music videos. Edited source available in example.
I am just new to XMPP, and I am making the first "HELLO" code. Please take your time look at the following code (the .zip is at the end of this topic):
<html>
<head>
<title>Hello - Chapter 3</title>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
text-align: center;
}
.hidden {
display: none;
}
#log {
padding: 10px;
}
</style>
<script language="javascript" type="text/javascript" src="scripts/jQuery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jQueryUI.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.js"></script>
<script language="javascript" type="text/javascript" src="scripts/flXHR.js"></script>
<script language="javascript" type="text/javascript" src="scripts/strophe.flxhr.js"></script>
<link rel="stylesheet" href="hello.css"></link>
<script language="javascript" type="text/javascript">
var Hello = {
connection: null,
log: function(msg) {
$("#log").append("<p>" + msg + "</p>");
}
};
$(document).ready(function() {
$("#login_dialog").dialog({
autoOpen: true,
draggable: false,
modal: true,
title: "Connect to XMPP",
buttons: {
"Connect": function() {
$(document).trigger("connect", {
jid: $("#jid").val(),
password: $("#password").val()
});
$("#password").val("");
$(this).dialog("close");
}
}
});
$(document).bind("connect", function(ev, data) {
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
conn.connect(data.jid, data.password, function(status) {
if (status === Strophe.Status.CONNECTED) {
$(document).trigger("connected");
} else if (status === Strophe.Status.DISCONNECTED) {
$(document).trigger("disconnected");
}
});
Hello.connection = conn;
});
$(document).bind("connected", function() {
// Inform the user
Hello.log("Connection established");
});
$(document).bind("disconnected", function() {
Hello.log("Connection terminated.");
// Remove dead connection object
Hello.connection = null;
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="log"></div>
<!-- Login dialog -->
<div id="login_dialog" class="hidden">
<label>JID:</label><input type="text" id="jid">
<label>Pwd:</label><input type="password" id="password">
</div>
</body>
</html>
According to the document, and the code, it must either say "Connection establised" or "Connection terminated". But it doesn't. I tried to put alert("It runs to here!"); in every line of the code, and it still alert(). It doesn't alert anymore when I put it in bind("connected") and bind("disconnect"). So I guess the code can not run to there. I've never done it before, and there is rarely documents about this, so I don't know what to do now.
Question: Could you guys please take a look at it, and tell me what was wrong? I myself is still working on debugging it!
Extra information: These are what is in my web folder (I am afraid of missing javascript framework files). All js files are latest version.
index.html
scripts/
jQuery.js
jQueryUI.js
strophe.js
flensed.js
flXHR.js
flXHR.swf
flXHR.vbs
swfobject.js
updateplayer.swf
checkplayer.js
css/
Not important...
Here are my code, please take time to view it: http://xx3004.kodingen.com/XMPP
I would appreciate any view of help.
[x]
your code is alright,
the problem is in the URL provided to make the connection using Strophe.
var conn = new Strophe.Connection("http://bosh.metajack.im:5280/xmpp-httpbind");
Try to find the location of the server, otherwise install an xmpp server(vysper), locally on your machine, and change the URL as http://localhost:8080/bosh/
Also try to comment the flxhr inclusion.
If you are running Openfire on your localhost make sure
bosh_service_url = 'http://127.0.0.1:7070/http-bind/'
ie
var conn = new Strophe.Connection("http://127.0.0.1:7070/http-bind/");
And if you are running ejabberd on your localhost make sure
bosh_service_url = "http://127.0.0.1:5222/http-bind/"