How to upload a screenshot using html2canvas?

How to upload a screenshot using html2canvas? - javascript

Using html2canvas how can I save a screen shot to an object? I've been exploring the demos, and see that the function to generate the screenshot is generated as follows:
$(window).ready(function() {
('body').html2canvas();
});
What I've tried doing is
$(window).ready(function() {
canvasRecord = $('body').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
upload(dataURL);
});
And, I then pass it to my upload() function. The problem I am having, is I can't figure out where the screenshot is being made in the html2canvas() library or what function returns it. I've tried converting the canvas object using this answer from SO (though I'm not certain I need to do this).
I just asked a question on how to upload a file to imgur, and the answers there (particularly #bebraw's) help me to understand what I need to do.
The upload() function is from the Imgur example api help:
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}

I have modified and annotated the method from this answer. It sends only one file, with a given name, composed from a <canvas> element.
if (!('sendAsBinary' in XMLHttpRequest.prototype)) {
XMLHttpRequest.prototype.sendAsBinary = function(string) {
var bytes = Array.prototype.map.call(string, function(c) {
return c.charCodeAt(0) & 0xff;
});
this.send(new Uint8Array(bytes).buffer);
};
}
/*
* #description Uploads a file via multipart/form-data, via a Canvas elt
* #param url String: Url to post the data
* #param name String: name of form element
* #param fn String: Name of file
* #param canvas HTMLCanvasElement: The canvas element.
* #param type String: Content-Type, eg image/png
***/
function postCanvasToURL(url, name, fn, canvas, type) {
var data = canvas.toDataURL(type);
data = data.replace('data:' + type + ';base64,', '');
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
var boundary = 'ohaiimaboundary';
xhr.setRequestHeader(
'Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.sendAsBinary([
'--' + boundary,
'Content-Disposition: form-data; name="' + name + '"; filename="' + fn + '"',
'Content-Type: ' + type,
'',
atob(data),
'--' + boundary + '--'
].join('\r\n'));
}

This code works for me. It will generate screenshot by html2canvas, upload the screenshot to imgur api, and return the imgur url.
<button class="upload" >Upload to Imgur</button>
<script>
$(".upload").on("click", function(event) {
html2canvas($('body'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
try {
var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
} catch(e) {
var img = canvas.toDataURL().split(',')[1];
}
// open the popup in the click handler so it will not be blocked
var w = window.open();
w.document.write('Uploading...');
// upload to imgur using jquery/CORS
// https://developer.mozilla.org/En/HTTP_access_control
$.ajax({
url: 'http://api.imgur.com/2/upload.json',
type: 'POST',
data: {
type: 'base64',
// get your key here, quick and fast http://imgur.com/register/api_anon
key: 'your api key',
name: 'neon.jpg',
title: 'test title',
caption: 'test caption',
image: img
},
dataType: 'json'
}).success(function(data) {
w.location.href = data['upload']['links']['imgur_page'];
}).error(function() {
alert('Could not reach api.imgur.com. Sorry :(');
w.close();
});
},
});
});
</script>

//Here I am using html2Canvas to capture screen and Java websockets to transfer data to server
//Limitation:Supported on latest browsers and Tomcat
Step1)Client Side : webSock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Arun HTML File -->>
<html>
<head>
<meta charset="utf-8">
<title>Tomcat web socket</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8080/WebSocketSample/wsocket");
ws.onopen = function () {
console.log("Web Socket Open");
};
ws.onmessage = function(message) {
console.log("MSG from Server :"+message.data);
//document.getElementById("msgArea").textContent += message.data + "\n";
document.getElementById("msgArea").textContent +" Data Send\n";
};
function postToServerNew(data) {
ws.send(JSON.stringify(data));
document.getElementById("msg").value = "";
}
//Set Interval
setInterval(function(){
var target = $('body');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var jsonData = {
type: 'video',
data: data,
duration: 5 ,
timestamp: 0, // set in worker
currentFolder: 0,// set in worker
};
postToServerNew(jsonData);
}
});
},9000);
function closeConnect() {
ws.close();
console.log("Web Socket Closed: Bye TC");
}
</script>
</head>
<body>
<div>
<textarea rows="18" cols="150" id="msgArea" readonly></textarea>
</div>
<div>
<input id="msg" type="text"/>
<button type="submit" id="sendButton" onclick="postToServerNew('Arun')">Send MSG</button>
</div>
</body>
</html>
Step2)Server Side
File 1)
package Arun.Work;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.RandomAccessFile;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.nio.MappedByteBuffer;
import java.nio.channels.AsynchronousFileChannel;
import java.nio.channels.FileChannel;
import java.nio.charset.Charset;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.Future;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;
/**
* Need tomcat-koyote.jar on class path, otherwise has compile error
* "the hierarchy of the type ... is inconsistent"
*
* #author Arun
*
*/
public class MyInBound extends MessageInbound {
private String name;
private WsOutbound myoutbound;
private String targetLocation;
public MyInBound(HttpServletRequest httpSerbletRequest, String targetLocation) {
this.targetLocation = targetLocation;
}
#Override
public void onOpen(WsOutbound outbound) {
System.out.println("Web Socket Opened..");
/*this.myoutbound = outbound;
try {
this.myoutbound.writeTextMessage(CharBuffer.wrap("Web Socket Opened.."));
} catch (Exception e) {
throw new RuntimeException(e);
}*/
}
#Override
public void onClose(int status) {
System.out.println("Close client");
// remove from list
}
#Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
System.out.println("onBinaryMessage Data");
try {
writeToFileNIOWay(new File(targetLocation), arg0.toString() + "\n");
} catch (Exception e) {
e.printStackTrace();
} finally {
//this.myoutbound.flush();
}
}// end of onBinaryMessage
#Override
protected void onTextMessage(CharBuffer inChar) throws IOException {
System.out.println("onTextMessage Data");
try {
writeToFileNIOWay(new File(targetLocation), inChar.toString() + "\n");
} catch (Exception e) {
e.printStackTrace();
} finally {
//this.myoutbound.flush();
}
}// end of onTextMessage
public void writeToFileNIOWay(File file, String messageToWrite) throws IOException {
System.out.println("Data Location:"+file+" Size:"+messageToWrite.length());
//synchronized (this){
byte[] messageBytes = messageToWrite.getBytes();
RandomAccessFile raf = new RandomAccessFile(file, "rw");
raf.seek(raf.length());
FileChannel fc = raf.getChannel();
MappedByteBuffer mbf = fc.map(FileChannel.MapMode.READ_WRITE, fc.position(), messageBytes.length);
mbf.put(messageBytes);
fc.close();
//}
}//end of method
/*
* //Working Fine public void writeToFileNIOWay(File file, String
* messageToWrite) throws IOException { byte[] messageBytes =
* messageToWrite.getBytes(Charset.forName("ISO-8859-1")); RandomAccessFile
* raf = new RandomAccessFile(file, "rw"); raf.seek(raf.length());
* FileChannel fc = raf.getChannel(); MappedByteBuffer mbf =
* fc.map(FileChannel.MapMode.READ_WRITE, fc.position(),
* messageBytes.length);
*
* mbf.put(messageBytes); fc.close(); }
*/
}
File 2)
package Arun.Work;
import java.io.File;
import java.util.concurrent.ConcurrentHashMap;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
/**
* WebSocketServlet is contained in catalina.jar. It also needs servlet-api.jar
* on build path
*
* #author Arun
*
*/
#WebServlet("/wsocket")
public class MyWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 1L;
// for new clients, <sessionId, streamInBound>
private static ConcurrentHashMap<String, StreamInbound> clients = new ConcurrentHashMap<String, StreamInbound>();
#Override
protected StreamInbound createWebSocketInbound(String protocol, HttpServletRequest httpServletRequest) {
// Check if exists
HttpSession session = httpServletRequest.getSession();
// find client
StreamInbound client = clients.get(session.getId());
if (null != client) {
return client;
} else {
System.out.println(" session.getId() :"+session.getId());
String targetLocation = "C:/Users/arsingh/Desktop/AnupData/DATA/"+session.getId();
System.out.println(targetLocation);
File fs=new File(targetLocation);
boolean bool=fs.mkdirs();
System.out.println(" Folder created :"+bool);
client = new MyInBound(httpServletRequest,targetLocation+"/Output.txt");
clients.put(session.getId(), client);
}
return client;
}
/*public StreamInbound getClient(String sessionId) {
return clients.get(sessionId);
}
public void addClient(String sessionId, StreamInbound streamInBound) {
clients.put(sessionId, streamInBound);
}*/
}

Related

How to return the GSON value to javascript file

I have written the code below in java to retrieve the value from database and stored in Json file. File name is DatabaseGraphValue.java.
package com;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.sql.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.GraphValue;
import com.google.gson.Gson;
#WebServlet("/GraphJsonValueServlet")
public class DataBaseGraphValue extends HttpServlet
{
static Connection conn = null;
static PreparedStatement stmt;
static ResultSet rs;
String sql;
static String project="Project1";
public static Connection getDataBaseVale()
{
if(conn != null)
{
return conn;
}
else
{
try
{
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3309/graphvalue","root","root");
}
catch (Exception e)
{
e.printStackTrace();
}
return conn;
}
}
public DataBaseGraphValue()
{
super();
}
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException
{
List<GraphValue> listOfGraphValue = getGraphValue();
Gson gson = new Gson();
String jsonString = gson.toJson(listOfGraphValue);
response.setContentType("application/json");
response.getWriter().write(jsonString);
}
private List<GraphValue> getGraphValue()
{
conn = getDataBaseVale();
List<GraphValue> listOfGraphValue = new ArrayList<GraphValue>();
try
{
stmt=conn.prepareStatement("select * from TestCase where ProjectName= ?");
stmt.setString(1,project);
rs=stmt.executeQuery();
while(rs.next())
{
GraphValue gv1 = new GraphValue();
gv1.setProjectName(rs.getString(1));
gv1.setTotalTestCase(rs.getInt(2));
gv1.setTestCaseExecuted(rs.getInt(3));
gv1.setFailedTestCase(rs.getInt(4));
gv1.setTestCaseNotExecuted(rs.getInt(2));
listOfGraphValue.add(gv1);
}
}
catch (SQLException e)
{
e.printStackTrace();
}
return listOfGraphValue;
}
}
And the other file name is GraphValue.java.
package com;
public class GraphValue {
private String projectName;
private int totalTestCase;
private int testCaseExecuted;
private int failedTestCase;
private int testCaseNotExecuted;
public String getProjectName()
{
return projectName;
}
public void setProjectName(String projectName)
{
this.projectName = projectName;
}
public int getTotalTestCase()
{
return totalTestCase;
}
public void setTotalTestCase(int totalTestCase)
{
this.totalTestCase = totalTestCase;
}
public int getTestCaseExecuted()
{
return testCaseExecuted;
}
public void setTestCaseExecuted(int testCaseExecuted)
{
this.testCaseExecuted = testCaseExecuted;
}
public int getFailedTestCase()
{
return failedTestCase;
}
public void setFailedTestCase(int failedTestCase)
{
this.failedTestCase = failedTestCase;
}
public int getTestCaseNotExecuted()
{
return testCaseNotExecuted;
}
public void setTestCaseNotExecuted(int testCaseNotExecuted)
{
this.testCaseNotExecuted = testCaseNotExecuted;
}
}
Now I need help in writing a JavaScript so that I can access the value which I am retrieving from the database and can draw a graph. Below is my code where I want the Json data.
<html>
<head>
</head>
<body>
<select id="ChartType" name="ChartType" onchange="drawChart()">
<option value = "PieChart">Select Chart Type
<option value="PieChart">PieChart
<option value="Histogram">Histogram
<option value="LineChart">LineChart
<option value="BarChart">BarChart
</select>
<div id="chart_div" style="border: solid 2px #000000;"></div>
<p id="demo"></p>
<p id="demo1"></p>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var row = [];
var temp;
var stri;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(getValues);
function getValues() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
stri = xmlhttp.responseText;
drawChart();
}
};
xmlhttp.open("GET", "sample.java", true);
xmlhttp.send();
}
function drawChart()
{
var data = new google.visualization.DataTable();
----How to get the jason data here for the graph
}
data.addRows(row);
var a = document.getElementById("ChartType").value;
document.getElementById("demo1").innerHTML = "You selected: " + a;
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300
};
var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
</html>
Value which I am retrieving from the database is:
ProjectName TotalTestCase TestCaseExecuted TestCaseFailed TestCaseNotExecuted
Project1 50 30 8 20
Please let me know how to proceed further. Thank you

Pass xmlhttp.responseText to drawChart() at onreadystatechange handler
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
stri = xmlhttp.responseText;
drawChart(stri);
}
at drawChart()
function drawChart(response) {
var data = new google.visualization.DataTable();
// How to get the jason data here for the graph
// do stuff with `response`:`stri`
console.log(response);
}

WPF Application crashes after overriding CefApp.GetRenderProcessHandler() for JS to C# call

I am developing a wpf application by using Xilium.CefGlue and Xilium.CefGlue.WPF. My WPF application is getting crashed after implementing Xilium.CefGlue.CefApp.GetRenderProcessHandler() in SampleCefApp. Before this implementation the application was working fine without any crashes. Actually I need to call a C# function from html local page by javascript function. This functionality is working fine in 32 bit version but not in 64 bit. The following is my implementation.
internal sealed class SampleCefApp : CefApp
{
public SampleCefApp()
{
}
private CefRenderProcessHandler renderProcessHandler = new Views.DemoRenderProcessHandler();
protected override CefRenderProcessHandler GetRenderProcessHandler()
{
return renderProcessHandler;
}
}
the following message was showing for app crash
<ProblemSignatures>
<EventType>APPCRASH</EventType>
<Parameter0>StreetMap.vshost.exe</Parameter0>
<Parameter1>14.0.23107.0</Parameter1>
<Parameter2>559b788a</Parameter2>
<Parameter3>libcef.DLL</Parameter3>
<Parameter4>3.2743.1449.0</Parameter4>
<Parameter5>57bbfe66</Parameter5>
<Parameter6>80000003</Parameter6>
<Parameter7>0000000000b68267</Parameter7>
</ProblemSignatures>
Is ther any issues for libcef dll while working with 64 bit. Is anybody can help for implementing JS to C# call by using Xilium.CefGlue and Xilium.CefGlue.WPF.
The following reference code i am using for this from the link
https://groups.google.com/forum/#!topic/cefglue/EhskGZ9OndY
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Threading;
using System;
namespace Xilium.CefGlue.Client {
internal sealed class DemoApp: CefApp {
private CefRenderProcessHandler renderProcessHandler = new DemoRenderProcessHandler();
protected override CefRenderProcessHandler GetRenderProcessHandler() {
return renderProcessHandler;
}
}
internal class DemoRenderProcessHandler: CefRenderProcessHandler {
MyCustomCefV8Handler myCefV8Handler = new MyCustomCefV8Handler();
protected override void OnWebKitInitialized() {
base.OnWebKitInitialized();
var nativeFunction = # "nativeImplementation = function(onSuccess) {
native
function MyNativeFunction(onSuccess);
return MyNativeFunction(onSuccess);
};
";
CefRuntime.RegisterExtension("myExtension", nativeFunction, myCefV8Handler);
}
internal class MyCustomCefV8Handler: CefV8Handler {
protected override bool Execute(string name, CefV8Value obj, CefV8Value[] arguments, out CefV8Value returnValue,
out string exception) {
//Debugger.Launch();
var context = CefV8Context.GetCurrentContext();
var taskRunner = CefTaskRunner.GetForCurrentThread();
var callback = arguments[0];
new Thread(() => {
//Sleep a bit: to test whether the app remains responsive
Thread.Sleep(3000);
taskRunner.PostTask(new CefCallbackTask(context, callback));
}).Start();
returnValue = CefV8Value.CreateBool(true);
exception = null;
return true;
}
}
internal class CefCallbackTask: CefTask {
private readonly CefV8Context context;
private readonly CefV8Value callback;
public CefCallbackTask(CefV8Context context, CefV8Value callback) {
this.context = context;
this.callback = callback;
}
protected override void Execute() {
var callbackArguments = CreateCallbackArguments();
callback.ExecuteFunctionWithContext(context, null, callbackArguments);
}
private CefV8Value[] CreateCallbackArguments() {
var imageInBase64EncodedString = LoadImage(# "C:\hamb.jpg");
context.Enter();
var imageV8String = CefV8Value.CreateString(imageInBase64EncodedString);
var featureV8Object = CefV8Value.CreateObject(null);
var listOfFeaturesV8Array = CefV8Value.CreateArray(1);
featureV8Object.SetValue("name", CefV8Value.CreateString("V8"), CefV8PropertyAttribute.None);
featureV8Object.SetValue("isEnabled", CefV8Value.CreateInt(0), CefV8PropertyAttribute.None);
featureV8Object.SetValue("isFromJSCode", CefV8Value.CreateBool(false), CefV8PropertyAttribute.None);
listOfFeaturesV8Array.SetValue(0, featureV8Object);
context.Exit();
return new [] {
listOfFeaturesV8Array,
imageV8String
};
}
private string LoadImage(string fileName) {
using(var memoryStream = new MemoryStream()) {
var image = Bitmap.FromFile(fileName);
image.Save(memoryStream, ImageFormat.Png);
byte[] imageBytes = memoryStream.ToArray();
return Convert.ToBase64String(imageBytes);
}
}
}
}
The HTML file, that I loaded at the first place:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>C# and JS experiments</title>
<script src="index.js"></script>
</head>
<body>
<h1>C# and JS are best friends</h1>
<div id="features"></div>
<div id="image"></div>
</body>
</html>
The JavaScript code:
function Browser() {
}
Browser.prototype.ListAllFeatures = function(onSuccess) {
return nativeImplementation(onSuccess);
}
function App(browser) {
this.browser = browser;
}
App.prototype.Run = function() {
var beforeRun = new Date().getTime();
this.browser.ListAllFeatures(function(features, imageInBase64EncodedString) {
var feautersListString = '';
for (var i = 0; i < features.length; i++) {
var f = features[i];
feautersListString += ('<p>' + 'Name: ' + f.name + ', is enabled: ' + f.isEnabled + ', is called from js code: ' + f.isFromJSCode + '</p>');
}
feautersListString += '<p> The image: </p>';
feautersListString += '<p>' + imageInBase64EncodedString + '</p>';
document.getElementById("features").innerHTML = feautersListString;
var afterRun = new Date().getTime();
document.getElementById("image").innerHTML = '<img src="data:image/png;base64,' + imageInBase64EncodedString + '" />';
var afterLoadedImage = new Date().getTime();
console.log("ELAPSED TIME - INSIDE LIST ALL FEATURES: " + (afterRun - beforeRun));
console.log("ELAPSED TIME - IMAGE IS LOADED TO THE <img> TAG: " + (afterLoadedImage - beforeRun));
});
}
window.onload = function() {
var browser = new Browser();
var application = new App(browser);
//Lets measure
var beforeRun = new Date().getTime();
application.Run();
var afterRun = new Date().getTime();
console.log("ELAPSED TIME - INSIDE ONLOAD: " + (afterRun - beforeRun));
}
Any help is appreciated.

I enabled the cef logging. It shows the following log
[0826/171951:ERROR:proxy_service_factory.cc(128)] Cannot use V8 Proxy resolver in single process mode.
.So I changed the SingleProcess=false in CeffSetting. Now the crashing issue is solved and then the requested webpage is not showing in cefwpfbrowser.
Now I am getting the following message from the log file
[0826/173636:VERBOSE1:pref_proxy_config_tracker_impl.cc(151)] 000000001B2A7CC0: set chrome proxy config service to 000000001B234F60
[0826/173636:VERBOSE1:pref_proxy_config_tracker_impl.cc(276)] 000000001B2A7CC0: Done pushing proxy to UpdateProxyConfig
[0826/173637:VERBOSE1:webrtc_internals.cc(85)] Could not get the download directory.
How to solve the requested page not loading issue in cefwpfbrowser.

Unable to update webpage with database notifications realtime with SignalR

I am working on a web application developed using Asp.Net MVC which on which I have a page on which data gets updated at realtime whenever data is modified on the database. I have some source on line and tried to implement this feature but it resulted in huge invalid data on the webpage.
I am using SQL dependency and SignalR to achieve this as follows
In Global.asax, I have the following
protected void Application_Start()
{
SqlDependency.Start(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
}
protected void Application_End()
{
SqlDependency.Stop(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
}
and in Models section I have the following classes
public class JobInfo
{
public int JobID { get; set; }
public string Name { get; set; }
public DateTime LastExecutionDate { get; set; }
public string Status { get; set; }
}
public class JobInfoRepository
{
public IEnumerable<JobInfo> GetData()
{
using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
{
connection.Open();
using (SqlCommand command = new SqlCommand(#"SELECT [JobID],[Name],[LastExecutionDate],[Status]
FROM [dbo].[JobInfo]", connection))
{
// Make sure the command object does not already have
// a notification object associated with it.
command.Notification = null;
SqlDependency dependency = new SqlDependency(command);
dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);
if (connection.State == ConnectionState.Closed)
connection.Open();
using (var reader = command.ExecuteReader())
return reader.Cast<IDataRecord>()
.Select(x => new JobInfo(){
JobID = x.GetInt32(0),
Name = x.GetString(1),
LastExecutionDate = x.GetDateTime(2),
Status = x.GetString(3) }).ToList();
}
}
}
private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
{
JobHub.Show();
}
}
I have created a SignalR Hub class as follows which has the Show() function used in the above class
using Microsoft.AspNet.SignalR.Hubs;
public class JobHub : Hub
{
public static void Show()
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<JobHub>();
context.Clients.All.displayStatus();
}
}
And I have the controller in which I am calling GetData() method defined in the JobInfoRepository class
public class JobInfoController : Controller
{
// GET: /JobInfo/
JobInfoRepository objRepo = new JobInfoRepository();
public IEnumerable<JobInfo> Get()
{
return objRepo.GetData();
}
}
I have created an Action named JobInfo in HomeController and returned the following view
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JobStatus</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div>
<table id="tblJobInfo" class="clientTable" style="text-align:center;margin-left:10px"></table>
</div>
</body>
</html>
#section scripts {
<script src="~/Scripts/jquery.signalR-2.0.1.min.js"></script>
<script src="/signalr/hubs"></script>
<script src="~/App/JobInfo.js"></script>
}
to retrieve the data and supply it to tblJobInfo id in the above html, a java script function is used
$(function () {
// Proxy created on the fly
var job = $.connection.jobHub;
// Declare a function on the job hub so the server can invoke it
job.client.displayStatus = function () {
getData();
};
// Start the connection
$.connection.hub.start();
getData();
});
function getData() {
var $tbl = $('#tblJobInfo');
$.ajax({
url: '../JobInfo/',
type: 'GET',
datatype: 'json',
success: function (data) {
if (data.length > 0) {
$tbl.empty();
$tbl.append(' <tr><th>ID</th><th>Name</th><th>Status</th></tr>');
var rows = [];
for (var i = 0; i < data.length; i++) {
rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Status + '</td></tr>');
}
$tbl.append(rows.join(''));
}
}
});
}
As in the demo I found it to be working fine but when I go to http://localhost:57044/Home/JobInfo/ I get invalid data on the page besides not getting the realtime notifications as in the following image
reference to the source I found online is http://techbrij.com/database-change-notifications-asp-net-signalr-sqldependency

inject js file to webview

I need to inject some javaScript files into loading page.
my code:
#Override
public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
super.doUpdateVisitedHistory(view, url, isReload); //To change body of overridden methods use File | Settings | File Templates
mWebView.loadUrl("javascript:(function(){var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/jquery.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script)})();");
mWebView.loadUrl("javascript:(function(){var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/rangy-core.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script)})();");
mWebView.loadUrl("javascript:(function(){var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/rangy-serializer.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script)})();");
mWebView.loadUrl("javascript:(function(){var script = document.createElement('script');script.setAttribute('src', 'file:///android_asset/android.selection.js'); script.setAttribute('type', 'text/javascript'); document.body.appendChild(script)})();");// .
}
but it's not work =(
Change code to
mWebView.loadUrl("javascript:function loadScript(url, callback)" +
"{" +
" var head = document.getElementsByTagName('head')[0];" +
" var script = document.createElement('script');" +
" script.type = 'text/javascript';" +
" script.src = url;" +
" script.onreadystatechange = callback;" +
" script.onload = callback;" +
" head.appendChild(script);" +
"}");
mWebView.loadUrl("javascript:loadScript('file:///android_asset/jquery.js','callback')");
mWebView.loadUrl("javascript:loadScript('file:///android_asset/rangy-core.js','callback')");
mWebView.loadUrl("javascript:loadScript('file:///android_asset/rangy-serializer.js','callback')");
mWebView.loadUrl("javascript:loadScript('file:///android_asset/android.selection.js','callback')");
Now I have Error : 06-11 10:24:15.432: ERROR/Web Console(7962): Not allowed to load local resource: file:///android_asset/jquery.js at null:0

You can use js method to load js file and pass url as a parameter from java
Here is the full working example
[Activity.java]
public class MainActivity extends Activity {
WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JavaScriptInterface(), "jsinterface");
mWebView.loadUrl("file:///android_asset/sq.html");
}
final class JavaScriptInterface {
JavaScriptInterface() {
}
#JavascriptInterface
public void windowLoaded() {
mWebView.loadUrl("javascript:loadScript('test.js', 'testing')");
Log.i("browser", "browser loaded");
}
}
}
[sq.html]
<html>
<head>
<script>
onload = function () {
window.jsinterface.windowLoaded();
}
//JS
function loadScript(url, callback)
{
console.log("loading script " + url);
// adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
//script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
head.appendChild(script);
}
</script>
</head>
<body>replace this
</body>
</html>
[test.js] inside assets folder
document.body.innerHTML = "<p>testing</p>";
on successful execution webview will show testing by loading test.js dynamically.

Here is how i ended up doing it. I used the Content:// protocol and set up a contentprovider to handle returning a file descriptor to the system
Here is my fileContentProvider:
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import org.apache.commons.io.IOUtils;
import android.content.ContentProvider;
import android.content.ContentValues;
import android.database.Cursor;
import android.net.Uri;
import android.os.ParcelFileDescriptor;
import android.util.Log;
public class FileContentProvider extends ContentProvider {
#Override
public ParcelFileDescriptor openFile(Uri uri, String mode) {
Log.d("FileContentProvider","fetching: " + uri);
ParcelFileDescriptor parcel = null;
String fileNameRequested = uri.getLastPathSegment();
String[] name=fileNameRequested.split("\\.");
String prefix=name[0];
String suffix=name[1];
// String path = getContext().getFilesDir().getAbsolutePath() + "/" + uri.getPath();
//String path=file:///android_asset/"+Consts.FILE_JAVASCRIPT+"
/*check if this is a javascript file*/
if(suffix.equalsIgnoreCase("js")){
InputStream is = null;
try {
is = getContext().getAssets().open("www/"+Consts.FILE_JAVASCRIPT);
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
File file = stream2file(is,prefix,suffix);
try {
parcel = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
} catch (FileNotFoundException e) {
Log.e("FileContentProvider", "uri " + uri.toString(), e);
}
}
return parcel;
}
/*converts an inputstream to a temp file*/
public File stream2file (InputStream in,String prefix,String suffix) {
File tempFile = null;
try {
tempFile = File.createTempFile(prefix, suffix);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
tempFile.deleteOnExit();
FileOutputStream out = null;
try {
out = new FileOutputStream(tempFile);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
IOUtils.copy(in, out);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return tempFile;
}
#Override
public boolean onCreate() {
return true;
}
#Override
public int delete(Uri uri, String s, String[] as) {
throw new UnsupportedOperationException("Not supported by this provider");
}
#Override
public String getType(Uri uri) {
throw new UnsupportedOperationException("Not supported by this provider");
}
#Override
public Uri insert(Uri uri, ContentValues contentvalues) {
throw new UnsupportedOperationException("Not supported by this provider");
}
#Override
public Cursor query(Uri uri, String[] as, String s, String[] as1, String s1) {
throw new UnsupportedOperationException("Not supported by this provider");
}
#Override
public int update(Uri uri, ContentValues contentvalues, String s, String[] as) {
throw new UnsupportedOperationException("Not supported by this provider");
}
}
in the manifest i defined the provider:
<provider android:name="com.example.mypackage.FileContentProvider"
android:authorities="com.example.fileprovider"
/>
Here is the javascript o inject into the webview:
webView.loadUrl("javascript:(function() { "
+ "var script=document.createElement('script'); "
+ " script.setAttribute('type','text/javascript'); "
+ " script.setAttribute('src', 'content://com.example.fileprovider/myjavascriptfile.js'); "
/* + " script.onload = function(){ "
+ " test(); "
+ " }; "
*/ + "document.body.appendChild(script); "
+ "})();");
and here is the myjavascriptfile.js (as an example):
function changeBackground(color) {
document.body.style.backgroundColor = color;
}

You don't really need the content provider. Instead of
mWebView.loadUrl("file:///android_asset/sq.html");
you can use the following to load the original html file. Then the script will be able to upload test.js from the assets directory
mWebView.loadDataWithBaseURL("file:///android_asset/", data,
"text/html", null, null);

Get image from clipboard and save it to the server from client browser chrome or firefox

I am using this tutorial, it works in chrome, it shows me an image as a div background image
now I want to save that image on the server side in specific folder... mine sample code
just copy and save it in .html and open with chrome ... and press printscreen button of keyboard and click on this page and press Ctrl+V
you will see the image... now I want that image to save on server side in a specific folder
My code
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 JavaScript Pasting Image Data in Chrome </title>
<link rel="stylesheet" type="text/css" media="all" href="http://strd6.com/wp-content/themes/twentyeleven/style.css" />
<script type='text/javascript' src='http://strd6.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
</head>
<body >
<div id="page" style="height:1000px">
<script>
(function() {
(function($) {
var defaults;
$.event.fix = (function(originalFix) {
return function(event) {
event = originalFix.apply(this, arguments);
if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
defaults = {
callback: $.noop,
matchType: /image.*/
};
return $.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return this.each(function() {
var $this, element;
element = this;
$this = $(this);
return $this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
return options.callback.call(element, {
dataURL: evt.target.result,
event: evt,
file: file,
name: file.name
});
};
reader.readAsDataURL(file);
return found = true;
}
});
});
});
};
})(jQuery);
}).call(this);
jQuery("html").pasteImageReader(function(results) {
var dataURL, filename;
filename = results.filename, dataURL = results.dataURL;
return jQuery("#page").css({
backgroundImage: "url(" + dataURL + ")",
backgroundRepeat: "repeat"
});
});
</script>
</div>
</body>
</html>

You'll need to send the data to the server, probably with an Ajax POST request. The data can be extracted from dataURL, it's a base64 encoded image with some metadata at the front.

yesterday i am facing that problem now i solve that in Firefox ......
sample code
index.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#submit').click(function() {
$.ajax({
type: "POST",
url: "<%= request.getContextPath()%>" + "/ImageCreator",
data: {html: $('#mydiv').find("img").attr('src')},
success: function() {
alert("Image Successfully Uploaded,Now Go Back And Click Submit");
window.close();
window.close();
},
error: function() {
alert("Error Occurred While Uploading Image");
}
});
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Press Keyboard "Print Screen key" Than Click in the Colored Area and Press Control+V then Click Upload Button</h2>
<!-- <div onclick="createDiv()"> Click Here!</div>
<div onclick="subb();"> Click Value!</div> -->
<Button href="#" id="submit" >Upload</button>
<div contenteditable="" id="mydiv" style=" height: 700px;background-color: #CCCCCC;"></div>
</div>
</body>
</html>
in the it send the ajex request to the servlet name /ImageCreator
that is the code of servlet
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.mail.Session;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import util.ImageUtils;
/**
*
* #author Zeeshan Akhter
*/
public class ImageCreator extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
BufferedImage newImg;
HttpSession session = request.getSession(true);
String minedata = request.getParameter("html");
// System.out.println("minedata" + minedata);
newImg = ImageUtils.decodeToImage(minedata.replace("data:image/png;base64,", ""));
String date = "";
Date date1 = new Date();
DateFormat formatter = new SimpleDateFormat("ddMMyyhhmmss");
date = formatter.format(date1);
// File FilePathsdd = new File(FilePaths);
// JOptionPane.showConfirmDialog(null,application.getRealPath(request.getContextPath()+"/js/") );
File dateFolder = new File(((String) session.getAttribute("imagePath")) + "/js/" + date);
if (!dateFolder.exists()) {
dateFolder.mkdir();
dateFolder.setExecutable(true);
dateFolder.setReadable(true);
dateFolder.setWritable(true);
}
String path = dateFolder.getAbsolutePath();
while ((path.contains("\\"))) {
System.out.println("\nPath1=" + path);
path = (path.replace("\\", "/"));
System.out.println("\nPath2=" + path);
}
File Save = new File(path + "/ForexImage.png");
System.out.println("ImagePath=" + Save.getAbsolutePath().replace("\\", "/"));
session.setAttribute("createdFilePath", Save.getAbsolutePath().replace("\\", "/"));
ImageIO.write(newImg, "png", Save);
}
}

Here is the class util.ImageUtils
package util;
/**
*
* #author ZeeshanAakhter
*http://latest-tutorial.com
*http://zeeshanakhter.com
*/
import java.io.IOException;
import sun.misc.BASE64Encoder;
import sun.misc.BASE64Decoder;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
public class ImageUtils {
/**
* Decode string to image
*
* #param imageString The string to decode
* #return decoded image
*/
public static BufferedImage decodeToImage(String imageString) {
BufferedImage image = null;
byte[] imageByte;
try {
BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(imageString);
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(bis);
bis.close();
} catch (Exception e) {
e.printStackTrace();
}
return image;
}
/**
* Encode image to string
*
* #param image The image to encode
* #param type jpeg, bmp, ...
* #return encoded string
*/
public static String encodeToString(BufferedImage image, String type) {
String imageString = null;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
try {
ImageIO.write(image, type, bos);
byte[] imageBytes = bos.toByteArray();
BASE64Encoder encoder = new BASE64Encoder();
imageString = encoder.encode(imageBytes);
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
return imageString;
}
}

Develop Reference

JavaScript is the programming language of the Web.

How to upload a screenshot using html2canvas? - javascript

Related

How to return the GSON value to javascript file

WPF Application crashes after overriding CefApp.GetRenderProcessHandler() for JS to C# call

Unable to update webpage with database notifications realtime with SignalR

inject js file to webview

Get image from clipboard and save it to the server from client browser chrome or firefox

Categories

Resources