I want to save the screenshot to server when click on div on page. It's a few problems. I'm rookie. Please help.
1)The picture is being saved but also shown at the bottom of the page. just want to be saved.
2)This is the most important. page contains iframe and image files. my main goal is to take images of them. but I was not successful. please help.
my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="mydiv">
here is iframe
</div>
<div>
bla bla bla
image
</div>
<script type="text/javascript" src="html2canvas.js"></script>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var mydiv = document.getElementById('mydiv');
mydiv.style.cursor = 'pointer';
mydiv.onclick = function () {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {image: base64URL},
success: function(data){
console.log('Upload successfully');
}
});
});
};
mydiv.onmouseover = function() {
this.style.backgroundColor = 'white';
};
mydiv.onmouseout = function() {
this.style.backgroundColor = '';
};
</script>
</body>
</html>
please edit the code for me. how it works the way I want.
ajaxfile.php I have no problem with this
<?php
$image = $_POST['image'];
$location = "upload/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
I want to link css file on printing specific div but it dose not get stylesheet on printing area. How can i fix this. Here is my source code:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>');
win.document.write($("#article_main_wrapper").html());
win.document.write('</body></html>');
win.print();
win.close();
}
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
var html = '<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>';
html += $("#article_main_wrapper").html();
html += '</body></html>';
win.print();
win.close();
win.document.write(html); // You need to append the `html` in a single element
// Write it at once to a single win.document.write
Here is an example of injecting css via javascript.
(function(d, s, id) {
var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0];
if (d.getElementById(id)) {
return;
}
css = d.createElement(s);
css.id = id;
css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css";
css.rel = "stylesheet";
}(document, 'link', 'bootstrap'));
<html>
<head>
</head>
<body>
<button class="btn btn-success">normal button to bootstrap button by adding css</button>
</body>
</html>
if it's for printing with a new tab where you want to append content with css and then print, just go with there steps
var content = document.createTextNode("Some HTML content you want to print");
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.href = 'css url';
css.media = 'all';
printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open()
printwindow.document.head.appendChild(css);
printwindow.document.body.appendChild(content);
printwindow.print();
printwindow.document.close();
Another possibility is to read the content of the stylesheet and write it directly into the HTML. Here an example using jQuery:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
$.get('main.css', function (data) {
console.log(data);
win.document.write('<html><head><title>my div</title><style>');
win.document.write(data);
win.document.write('</style></head><body >');
win.document.write('<div id="article_main_wrapper">My DIV</div>');
win.document.write('</body></html>');
win.print();
win.close();
});
}
The document.write causing the error SCRIPT70: Permission denied if you use a few document.write inside iframe. This error occurs only in the Edge. In all other browsers this error is not observed.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSP-558</title>
</head>
<body>
<script>
document.write("1");
document.write("2");
</script>
<script>
var iframe = document.createElement("iframe");
iframe.width = window.outerWidth;
iframe.height = window.outerHeight;
iframe.onload = function () {
var doc = iframe.contentWindow.document;
var script = doc.createElement("script");
script.type = "text/javascript";
script.text = [
'document.write("1");',
'document.write("2");'
].join("");
doc.body.appendChild(script);
};
document.body.appendChild(iframe);
</script>
</body>
</html>
This code will display 12 on the page and in iframe, but it cause an error and displays only 1 inside iframe in Edge.
If you use only one document.write everything works fine. Unfortunately, the code that contains several document.write comes from a third-party developers and they can't change it.
Have you encountered this error and is there any solution for it?
There was found a solution. If you add window in front of document.write the error will not be caused.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSP-558</title>
</head>
<body>
<script>
document.write("1");
document.write("2");
</script>
<script>
var iframe = document.createElement("iframe");
iframe.width = window.outerWidth;
iframe.height = window.outerHeight;
iframe.onload = function () {
var doc = iframe.contentWindow.document;
var script = doc.createElement("script");
script.type = "text/javascript";
script.text = [
'window.document.write("1");',
'window.document.write("2");'
].join("");
doc.body.appendChild(script);
};
document.body.appendChild(iframe);
</script>
</body>
</html>
I have a file index.html with one iframe set and iframe source points to another domain. I am setting localstorage in index.html and trying to get the value in iframe source.(sample.html)
File 1
index.html
<html>
<head>
//js file
</head>
<body>
setting localstorage
Iframe src="55.10.45.045/sample.html"
</body>
</html>
file 2
sample.html
<html>
<head>
//js file
</head>
<body>
getting localstorage Item //Returns null
</body>
</html
You want to use something like this.
Sending information:
window.onload = function() {
var win = document.getElementById('iFrameId').contentWindow;
win.postMessage(JSON.stringify({
key: 'dataKey',
data: dataPassing
}), "*");
};
Receiving information:
window.onmessage = function(e) {
var payload = JSON.parse(e.data);
localStorage.setItem(payload.key, payload.data);
};
This will pass a JSON object into the iFrame, then the script in the frame will take it and push it into local storage.
Use like this...
index.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
click
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("link", "http://www.w3schools.com/");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("link");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
sample.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML = "<iframe src='"+localStorage.getItem("link")+"' width='100%' height='350px' />";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
sorry this problem might be resolved already, but I have not been able to find the answer.
I basically have 2 files:
form.html code:
<!DOCTYPE html>
<html>
<head>
<title>BACKUP MONITOR</title>
<script>
function getEvents()
{
alert("getEvents");
}
alert("in HTML");
var w = window.open();
var s = w.document.createElement("script");
s.type = 'text/javascript';
s.src = ".../fileA.js";
w.document.body.appendChild(s);
w.alert("New Window");
</script>
</head>
<body>
</body>
</html>
fileA.js code:
alert("in fileA");
getEvents();
Question:
I can't call getEvents() from fileA.js (new Window). Is there any way to do this?
thank you very much