inject js file to webview

inject js file to webview - javascript

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);

Related

Injecting CSS into WebView not working onPageFinished

Here's my code for injecting CSS into a Webview:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("Ubqari");
ww = (WebView) findViewById(R.id.ww);
ww.getSettings().setJavaScriptEnabled(true);
ww.getSettings().setDomStorageEnabled(true);
ww.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url) {
injectCSS();
}
});
ww.loadUrl("http://ubqari.org");``
}
And here's injectCSS function:
private void injectCSS() {
try {
InputStream inputStream = getAssets().open("style.css");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
inputStream.close();
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
ww.loadUrl("javascript:(function() {" +
"alert('Hello! I am an alert box!');"+
"var parent = document.getElementsByTagName('head').item(0);" +
"var style = document.createElement('style');" +
"style.type = 'text/css';" +
// Tell the browser to BASE64-decode the string into your script !!!
"style.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(style)" +
"})()");
} catch (Exception e) {
e.printStackTrace();
}
}
I don't know what's going wrong in this code. My style.css code is correct but the problem is in the onPageFinished section. It's not injecting the CSS when the page has finished loading. Any expert can answer me?

Java Android - Get an Image from a webview

So I load a page of a website and its show on my android APP via webview.
The website have several images on it; let's say the website page contains 3 images:
<img src="pic_mountain.jpg">
<img src="random_image.php">
<img src="pic_mountain_second.jpg">
my question is, how do I get each of the images above, so I can access each of it as Bitmap on my Java Android apps?

Here is working example to get HTML as string which is loaded in webview and how you can get image url from that after you can convert image url to bitmap.
set webview client to your webview like
webview.setWebViewClient(new WebClientClass());
The webview client is given below
public class WebClientClass extends WebViewClient {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (progressDialog != null && progressDialog.isShowing())
progressDialog.dismiss();
wvAboutUs.evaluateJavascript(
"(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
new ValueCallback<String>() {
#Override
public void onReceiveValue(String html) {
JsonReader reader = new JsonReader(new StringReader(html));
reader.setLenient(true);
try {
if (reader.peek() != JsonToken.NULL) {
if (reader.peek() == JsonToken.STRING) {
String msg = reader.nextString();
if (msg != null) {
Log.d("HTML", msg);
Pattern p = Pattern.compile("src=\"(.*?)\"");
Matcher m = p.matcher(msg);
if (m.find()) {
Log.d("HTML", m.group(1)); // This will print your image url
}
}
}
}
} catch (IOException e) {
Log.e("TAG", "MainActivity: IOException", e);
} finally {
try {
reader.close();
} catch (IOException e) {
}
}
}
});
}
}

Android - Parse JS generated urls with JSOUP

im trying to parse url generated by Bootstrap`s Bootpage.js which looks like
https://example.com/#page-2
but JSOUP cant parse it and showing main url.
how to get normal link from Bootpage or how to make JSOUP to parse it.
Parsing code:
Jsoup.connect("https://example.com/#page-2").followRedirects(true).get();

(See UPDATE below, first/accepted solution didn't met the android requirement, but is left for reference.)
Desktop Solution
HtmlUnit doesn't seem able to handle this site (often the case, lately). So I don't have a plain java solution either, but you could use PhantomJS: download the binary for your os, create a script file, start the process from within your java code and parse the output with a dom parser like jsoup.
Script file (here called simple.js):
var page = require('webpage').create();
var fs = require('fs');
var system = require('system');
var url = "";
var fileName = "output";
// first parameter: url
// second parameter: filename for output
console.log("args length: " + system.args.length);
if (system.args.length > 1) {
url=system.args[1];
}
if (system.args.length > 2){
fileName=system.args[2];
}
if(url===""){
phantom.exit();
}
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
page.settings.loadImages = false;
page.open(url, function(status) {
console.log("Status: " + status);
if(status === "success") {
var path = fileName+'.html';
fs.write(path, page.content, 'w');
}
phantom.exit();
});
Java code (example to get title and cover-url):
try {
//change path to phantomjs binary and your script file
String outputFileName = "srulad";
String phantomJSPath = "phantomjs" + File.separator + "bin" + File.separator + "phantomjs";
String scriptFile = "simple.js";
String urlParameter = "http://srulad.com/#page-2";
new File(outputFileName+".html").delete();
Process process = Runtime.getRuntime().exec(phantomJSPath + " " + scriptFile + " " + urlParameter + " " + outputFileName);
process.waitFor();
Document doc = Jsoup.parse(new File(outputFileName + ".html"),"UTF-8"); // output.html is created by phantom.js, same path as page.js
Elements elements = doc.select("#list_page-2 > div");
for (Element element : elements) {
System.out.println(element.select("div.l-description.float-left > div:nth-child(1) > a").first().attr("title"));
System.out.println(element.select("div.l-image.float-left > a > img.lazy").first().attr("data-original"));
}
} catch (IOException | InterruptedException e) {
e.printStackTrace();
}
Output:
სიყვარული და მოწყალება / Love & Mercy
http://srulad.com/assets/uploads/42410_Love_and_Mercy.jpg
მუზა / The Muse
http://srulad.com/assets/uploads/43164_large_qRzsimNz0eDyFLFJcbVLIxlqii.jpg
...
UPDATE
Parsing of websites with javascript based dynamic content in Android is possible using WebView and jsoup.
The following example app uses a javascript enabled WebView to render a Javascript dependent website. With a JavascriptInterface the html source is returned, parsed with jsoup and as a proof of concept the titles and the urls to the cover-images are used to populate a ListView. The buttons decrement or increment the page number triggering an update of the ListView. Note: tested on an Android 5.1.1/API 22 device.
add internet permission to your AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/page_down"
android:id="#+id/buttonDown"
android:layout_weight="0.5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/page_up"
android:id="#+id/buttonUp"
android:layout_weight="0.5" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/listView"
android:layout_gravity="bottom"
android:layout_weight="0.5" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private final Handler uiHandler = new Handler();
private ArrayAdapter<String> adapter;
private ArrayList<String> entries = new ArrayList<>();
private ProgressDialog progressDialog;
private class JSHtmlInterface {
#android.webkit.JavascriptInterface
public void showHTML(String html) {
final String htmlContent = html;
uiHandler.post(
new Runnable() {
#Override
public void run() {
Document doc = Jsoup.parse(htmlContent);
Elements elements = doc.select("#online_movies > div > div");
entries.clear();
for (Element element : elements) {
String title = element.select("div.l-description.float-left > div:nth-child(1) > a").first().attr("title");
String imgUrl = element.select("div.l-image.float-left > a > img.lazy").first().attr("data-original");
entries.add(title + "\n" + imgUrl);
}
adapter.notifyDataSetChanged();
}
}
);
}
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listView);
adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, android.R.id.text1, entries);
listView.setAdapter(adapter);
progressDialog = ProgressDialog.show(this, "Loading","Please wait...", true);
progressDialog.setCancelable(false);
try {
final WebView browser = new WebView(this);
browser.setVisibility(View.INVISIBLE);
browser.setLayerType(View.LAYER_TYPE_NONE,null);
browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setBlockNetworkImage(true);
browser.getSettings().setDomStorageEnabled(false);
browser.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
browser.getSettings().setLoadsImagesAutomatically(false);
browser.getSettings().setGeolocationEnabled(false);
browser.getSettings().setSupportZoom(false);
browser.addJavascriptInterface(new JSHtmlInterface(), "JSBridge");
browser.setWebViewClient(
new WebViewClient() {
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
progressDialog.show();
super.onPageStarted(view, url, favicon);
}
#Override
public void onPageFinished(WebView view, String url) {
browser.loadUrl("javascript:window.JSBridge.showHTML('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');");
progressDialog.dismiss();
}
}
);
findViewById(R.id.buttonDown).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
uiHandler.post(new Runnable() {
#Override
public void run() {
int page = Integer.parseInt(browser.getUrl().split("-")[1]);
int newPage = page > 1 ? page-1 : 1;
browser.loadUrl("http://srulad.com/#page-" + newPage);
browser.loadUrl(browser.getUrl()); // not sure why this is needed, but doesn't update without it on my device
if(getSupportActionBar()!=null) getSupportActionBar().setTitle(browser.getUrl());
}
});
}
});
findViewById(R.id.buttonUp).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
uiHandler.post(new Runnable() {
#Override
public void run() {
int page = Integer.parseInt(browser.getUrl().split("-")[1]);
int newPage = page+1;
browser.loadUrl("http://srulad.com/#page-" + newPage);
browser.loadUrl(browser.getUrl()); // not sure why this is needed, but doesn't update without it on my device
if(getSupportActionBar()!=null) getSupportActionBar().setTitle(browser.getUrl());
}
});
}
});
browser.loadUrl("http://srulad.com/#page-1");
if(getSupportActionBar()!=null) getSupportActionBar().setTitle(browser.getUrl());
} catch (Exception e) {
e.printStackTrace();
}
}
}

Inject Multiple JavaScript to Multuple Page of WebView Android

Say, I set my WebView into example.com then I clicked on the page and load the example.com/about.
In the WebView I've injected Javascript to modify the HTML on the example.com, and it worked, and the problem is, how to inject another JavaScript to modify example.com/about. I mean how to inject multiple JavaScript to a multiple page of WebView?
public class MainActivity extends AppCompatActivity {
WebView mWebView;
private int getScale() {
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
Double val = new Double(width) / new Double(100);
val = val * 100d;
return val.intValue();
}
#Override
protected void onCreate(Bundle savedInstanceState) {
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.activity_main_webview);
// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
mWebView.setWebViewClient(new WebViewClient());
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
// Inject CSS when page is done loading
injectCSS();
mWebView.loadUrl("javascript:var greeting = function (name) {\n" +
" console.log(\"Great to see you,\" + \" \" + name);\n" +
"};");
super.onPageFinished(view, url);
//Inject JS to edit html
injectScriptFile(view, "script.js"); // see below ...
// test if the script was loaded
view.loadUrl("javascript:setTimeout(test(), 500)");
}
private void injectScriptFile(WebView view, String scriptFile) {
InputStream input;
try {
input = getAssets().open(scriptFile);
byte[] buffer = new byte[input.available()];
input.read(buffer);
input.close();
// String-ify the script byte-array using BASE64 encoding !!!
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
view.loadUrl("javascript:(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var script = document.createElement('script');" +
"script.type = 'text/javascript';" +
// Tell the browser to BASE64-decode the string into your script !!!
"script.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(script)" +
"})()");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
}
});
mWebView.loadUrl("example.com");
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setDisplayZoomControls(false);
}
private void injectCSS() {
try {
InputStream inputStream = getAssets().open("style.css");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
inputStream.close();
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
mWebView.loadUrl("javascript:(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var style = document.createElement('style');" +
"style.type = 'text/css';" +
// Tell the browser to BASE64-decode the string into your script !!!
"style.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(style)" +
"})()");
} catch (Exception e) {
e.printStackTrace();
}
}
#Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mWebView.saveState(outState);
}
#Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
mWebView.restoreState(savedInstanceState);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu); // Add menu items, second value is the id, use this in the onCreateOptionsMenu
menu.add(0, 1, 0, "Back");
menu.add(0, 2, 0, "Refresh");
menu.add(0, 3, 0, "Forward");
getMenuInflater().inflate(R.menu.menu_main, menu);
return true; // End of menu configuration
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case 3: //If the ID equals 3 , go forward
mWebView.canGoForward();
item.setIcon(R.drawable.forward);
return true;
}
return super.onOptionsItemSelected(item);
}
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) { // Enables browsing to previous pages with the hardware back button
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { // Check if the key event was the BACK key and if there's history
mWebView.goBack();
return true;
} // If it wasn't the BACK key or there's no web page history, bubble up to the default
// system behavior (probably exit the activity)
return super.onKeyDown(keyCode, event);
}
}

How to upload a screenshot using html2canvas?

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);
}*/
}

Develop Reference

JavaScript is the programming language of the Web.

inject js file to webview - javascript

Related

Injecting CSS into WebView not working onPageFinished

Java Android - Get an Image from a webview

Android - Parse JS generated urls with JSOUP

Inject Multiple JavaScript to Multuple Page of WebView Android

How to upload a screenshot using html2canvas?

Categories

Resources