How to display NativeImage in Electron - electron

I have an Electron WebView. I want to take a screenshot of its content and display it somewhere in my application.
I have tried using the webview.capturePage method, which returns a Native Image.
How can I add that image to the DOM and thus display it on my app? I'm unsure how to convert it.

You can use image.toDataURL for this purpose (as #Mikaeru suggested) An example could be
<html>
<body>
<webview id="view" src="https://www.github.com/" style="width:320px; height:240px">
</webview>
<button id="capture">Capture</button>
<img id="show" src="" />
<script>
const wv = document.getElementById('view')
const b = document.getElementById('capture')
const i = document.getElementById('show')
b.addEventListener('click', () => {
wv.capturePage((img) => {
i.src = img.toDataURL()
})
})
</script>
</body>
</html>

Related

How to set video ID from user input

I would like to be able to set the video ID to be played from user input via an <input type="text"> field.
My naive attempt looks like so
<!DOCTYPE html>
<html>
<body>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
<script>
function loadVideo() {
var ytplayer = document.getElementByID("ytplayer");
var videoid = document.getElementByID("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
</body>
</html>
but the player widget remains blank after entering an ID and clicking "Load".
What is wrong?
Define a function before using it. Simply move the <script> above the <button>
You have a typo twice getElementById has a lower case "d".
In the end it will look like this:
<!DOCTYPE html>
<html>
<body>
<script>
function loadVideo() {
var ytplayer = document.getElementById("ytplayer");
var videoid = document.getElementById("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
</body>
</html>
I can't help you any further than that however, because your example doesn't work after these two things are fixed, as it doesn't contain all the code needed to make it work.

Jquery mobile and meteor reactive template variables not working

When I have a template variable, and I change it, the screen goes white and it goes blank.
heres a simple example:
{{#if var}}
<p align="center">reactive templating</p>
<button id="button" value="click"/>
{{else}}
<p align="center">worked!</p>
{{/if}}
Session.setDefault("var",true);
Template.content.var = function () {
return Session.get("var");
}
Template.content.events({
'click #button': function(e,t) {
Session.set("var", false);
}
});
The issue is that I have
<body>
{{>content}}
</body>
so it re-renders the whole page, including the page divs.
So do this instead...
<body>
<div data-role="page">
{{>content}}
</div>
</body>

Header back button with forced refreshing

I needed to force refreshing using this technique. When I navigate to a new page jQM correctly adds a back button in my header. But when I go back to the first page the back button incorrectly appears. Is it possible to conditionally create a back button? I have tried manually creating a back button and conditionally hiding it based on a parameter in the URI but it seems that once the button appears I can never hide it again.
Edit:
Here is some code that demonstrates the problem. Not only does it not hide the custom back button when you go back to page 1, but it doesn't hide the "page 1" content when you are on page 2, or visa versa. It seems that once something has been shown it cannot be rehidden.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
var backButtonVar = null;
var page1Var = null;
var page2Var = null;
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="false">
<div data-role="header">
<h1>Test</h1>
<a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a>
</div>
<div id="page1" data-role="content">
Go to page 2
</div>
<div id="page2" data-role"content">
This is page 2
</div>
<script>
$(document).ready(function() {
jQuery(document).on('pagehide', 'div', function(event, ui) {
var page = jQuery(event.target);
page.remove();
});
backButtonVar = $('#backButton');
page1Var = $('#page1');
page2Var = $('#page2');
// Is this the root?
if (window.location.search == '') {
backButtonVar.hide();
page1Var.show()
page2Var.hide()
} else {
backButtonVar.show();
page1Var.hide()
page2Var.show()
}
});
</script>
</div>
</body>
</html>
Here is the fix. Give the back-button a class backButton. .hide() it if the active page is the home page page1, else .show() it.
Demo
$('.backButton').hide();
$(document).on('pagebeforeshow', function () {
var activePage = $.mobile.activePage;
if (activePage[0].id != 'page1') {
$('.backButton').show();
}
else {
$('.backButton').hide();
}
});
If you have any question, please let me know.

No resize event in content of iframe (iOS Safari)

I have following html page:
<html>
<head>
<script type="text/javascript">
var myDiv = null;
window.onload = function() {
myDiv = document.getElementById("myDiv");
};
function buttonClick() {
myDiv.style.width = "200px";
myDiv.style.height = "100px";
}
</script>
</head>
<body>
<div id="myDiv" style="left:10px; top:10px; width:1000px; height:250px; overflow:auto;">
<iframe scrolling="no" id="myIframe" style="width:100%;height:100%" src="a.svg"></iframe>
</div>
<input type="button" id="button1" onclick="buttonClick()" value="resize div"/>
</body>
</html>
and a SVG "a.svg" that is the content of the iframe above:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<circle cx="500" cy="250" r="240"/>
<script type="text/ecmascript"><![CDATA[
window.onresize = function() {
console.log("resize");
};
]]></script>
</svg>
When i now open the html page on iOS Safari and i click the button to resize the iframe to 200x100 pixels, i do not get the resize event.
But if I do the same on a PC browser like Firefox, I get the resize event.
I know that iframes are handled differently in iOS Safari, but how can I make this working ?

How do you post to an iframe?

How do you post data to an iframe?
Depends what you mean by "post data". You can use the HTML target="" attribute on a <form /> tag, so it could be as simple as:
<form action="do_stuff.aspx" method="post" target="my_iframe">
<input type="submit" value="Do Stuff!">
</form>
<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>
If that's not it, or you're after something more complex, please edit your question to include more detail.
There is a known bug with Internet Explorer that only occurs when you're dynamically creating your iframes, etc. using Javascript (there's a work-around here), but if you're using ordinary HTML markup, you're fine. The target attribute and frame names isn't some clever ninja hack; although it was deprecated (and therefore won't validate) in HTML 4 Strict or XHTML 1 Strict, it's been part of HTML since 3.2, it's formally part of HTML5, and it works in just about every browser since Netscape 3.
I have verified this behaviour as working with XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict and in "quirks mode" with no DOCTYPE specified, and it works in all cases using Internet Explorer 7.0.5730.13. My test case consist of two files, using classic ASP on IIS 6; they're reproduced here in full so you can verify this behaviour for yourself.
default.asp
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Iframe Demo</title>
</head>
<body>
<form action="do_stuff.asp" method="post" target="my_frame">
<input type="text" name="someText" value="Some Text">
<input type="submit">
</form>
<iframe name="my_frame" src="do_stuff.asp">
</iframe>
</body>
</html>
do_stuff.asp
<%#Language="JScript"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Iframe Demo</title>
</head>
<body>
<% if (Request.Form.Count) { %>
You typed: <%=Request.Form("someText").Item%>
<% } else { %>
(not submitted)
<% } %>
</body>
</html>
I would be very interested to hear of any browser that doesn't run these examples correctly.
An iframe is used to embed another document inside a html page.
If the form is to be submitted to an iframe within the form page, then it can be easily acheived using the target attribute of the tag.
Set the target attribute of the form to the name of the iframe tag.
<form action="action" method="post" target="output_frame">
<!-- input elements here -->
</form>
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY">
</iframe>
Advanced iframe target use
This property can also be used to produce an ajax like experience, especially in cases like file upload, in which case where it becomes mandatory to submit the form, in order to upload the files
The iframe can be set to a width and height of 0, and the form can be submitted with the target set to the iframe, and a loading dialog opened before submitting the form. So, it mocks a ajax control as the control still remains on the input form jsp, with the loading dialog open.
Exmaple
<script>
$( "#uploadDialog" ).dialog({ autoOpen: false, modal: true, closeOnEscape: false,
open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } });
function startUpload()
{
$("#uploadDialog").dialog("open");
}
function stopUpload()
{
$("#uploadDialog").dialog("close");
}
</script>
<div id="uploadDialog" title="Please Wait!!!">
<center>
<img src="/imagePath/loading.gif" width="100" height="100"/>
<br/>
Loading Details...
</center>
</div>
<FORM ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()">
<!-- input file elements here-->
</FORM>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()">
</iframe>
This function creates a temporary form, then send data using jQuery :
function postToIframe(data,url,target){
$('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
$.each(data,function(n,v){
$('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
});
$('#postToIframe').submit().remove();
}
target is the 'name' attr of the target iFrame, and data is a JS object :
data={last_name:'Smith',first_name:'John'}
If you want to change inputs in an iframe then submit the form from that iframe, do this
...
var el = document.getElementById('targetFrame');
var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below
if (frame_win) {
doc = (window.contentDocument || window.document);
}
if (doc) {
doc.forms[0].someInputName.value = someValue;
...
doc.forms[0].submit();
}
...
Normally, you can only do this if the page in the iframe is from the same origin, but you can start Chrome in a debug mode to disregard the same origin policy and test this on any page.
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
You can use this code, will have to add proper params to be passed and also the api url to get the data.
var allParams = { xyz, abc }
var parentElm = document.getElementBy... // your own element where you want to create the iframe
// create an iframe
var addIframe = document.createElement('iframe');
addIframe.setAttribute('name', 'sample-iframe');
addIframe.style.height = height ? height : "360px";
addIframe.style.width = width ? width : "360px";
parentElm.appendChild(addIframe)
// make an post request
var form, input;
form = document.createElement("form");
form.action = 'example.com';
form.method = "post";
form.target = "sample-iframe";
Object.keys(allParams).forEach(function (elm) {
console.log('elm: ', elm, allParams[elm]);
input = document.createElement("input");
input.name = elm;
input.value = allParams[elm];
input.type = "hidden";
form.appendChild(input);
})
parentElm.appendChild(form);
form.submit();

Resources