I am going to create a Restful Web API for our client. I am new to Restful services. We are decided to use JSON as the format.
There is a requirement that uploading some documents to the server. How we can make it possible. What I want to do in server side for this. How to give instructions to the Users of the service to the format of JSON or request.
Please help me.
I will use the example of an image.
You can load up the image to a canvas, then pull out the data url from the canvas and use that in your json that you send to the server. Regarding other document types I would have to investigate further. This technique does work
<html>
<head>
</head>
<body>
<canvas id="test">
</canvas>
<img id="image" src="http://i.stack.imgur.com/VtLDZ.jpg"/>
<script>
window.onload=function(){
var can=document.getElementById("test");
var context=can.getContext("2d");
var img=document.getElementById("image");
context.drawImage(img, 10, 10, 150, 150);
var dataUrl=can.toDataUrl();
console.log(dataUrl);
};
</script>
</body>
</html>
You would possibly take these two approaches-
Use JSON in the url for any non-binary data.
Use multipart form for uploading your document.
Related
I am trying to get the image of the map from waypoint0 to waypoint1 through the here map REST API.
This is the Request URL:
http://image.maps.cit.api.here.com/mia/1.6/routing?waypoint0=:waypoint0lat%2C:waypoint0lng&waypoint1=:waypoint1lat%2C:waypoint1lng&mode=fastest%3Bcar%3Btraffic%3Adisabled&app_id=:app_id&app_code=:app_code&lc=1652B4&lw=6&t=0&ppi=320&w=400&h=600
with
waypoint0lat: "40.7369182",
waypoint0lng: "-73.9885248",
waypoint1lat: "40.7051079",
waypoint1lng: "-74.0157525"
The response I get is a large object with numbers and unknown characters. How can I decipher this response into the image?
Thanks!
I was able to retrieve the map image by using the example request from
https://developer.here.com/rest-apis/documentation/enterprise-map-image/topics/examples-routing-chicago-pois.html
Use your coordinates in the same example and an image tag should be able to render it on the webpage for you.
<html>
<head></head>
<body>
<img src="http://image.maps.cit.api.here.com/mia/1.6/routing
?app_id={YOURAPPID}
&app_code={YOURAPPCODE}
&waypoint0=40.7369182,-73.9885248
&waypoint1=40.7051079,-74.0157525
&poix0=40.7499714,-73.9979574;00a3f2;00a3f2;11;.
&poix1=40.7456827,-73.9954344;white;white;11;.
&lc=1652B4
&lw=6
&t=0
&ppi=320
&w=400
&h=600
"/>
</body>
</html>
Rendered using the demo app id ,app code
Is there a way to do this without any exe files or 3rd party things? I cannot use windows form components in web application and I am in need of taking screenshots of different URLs programmatically. Any idea will be appreciated.
Similar question here: Using HTML5/Canvas/JavaScript to take screenshots
JavaScript can read the DOM and render a fairly accurate
representation of that using canvas. I [#Niklas] have been working on a script
which converts html into an canvas image.
See also: http://html2canvas.hertzen.com/
Edit:
Note: You will need to write a web service/web method that accepts a base64 encoded string as an input parameter, and then saves that string (in its raw form, or converted to a file.)
Example usage of html2canvas:
var imageAsBase64;
$('body').html2canvas({
onrendered: function(canvas) {
imageAsBase64 = canvas.toDataURL();
// You now have a base64 string, representing a "screenshot" of
// your <body> element, which you can POST to your web service.
}
});
In my metro app ..I am using iframe to load a web application - basically a form which contains some controls and finally user click on finish button and i want to show alert
i know in metro app. we can give the alert using "new Windows.UI.PopupMessage" to show the alert. but how can i do the same from the web context(Iframe).
i have a function (showalert();) in my default.js where i am using the "new Windows.UI.PopupMessage" to show messages. if i am trying to access this function from iframe page like "window.parent.showalert();". i get exception saying access denied.
Please someone reply to this as this is very critical for me.
thanks & regards
Goutham
You can use HTML 5's postMessage to communicate between contexts.
Below is an image of a simplistic example with the relevant code snippets following it; the Bing Maps trip optimizer example uses this same technique on a grander scale.
The main page (default.js), which is running in the local context, includes an IFRAME loaded in web context via the following markup (I left out the unchanged <head> element to save space):
<body onload="localContext.onLoad();">
<p style="margin-top: 150px">This is default.html in the local context</p>
<div style="background-color: azure; width: 300px">
<iframe src="ms-appx-web:///webpage.html" />
</div>
</body>
localContext is defined in default.js as
var localContext = {
onLoad: function () {
window.attachEvent("onmessage",
function (msg) {
if (msg.origin == "ms-appx-web://bfddc371-2040-4560-a61a-ec479ed996b0")
new Windows.UI.Popups.MessageDialog(msg.origin).showAsync().then();
});
}
};
and it defines an onLoad function for default.html that registers a listener to the onmessage event, and when that event fires a MessageDialog is shown (or you can take whatever action you want to do in the local context).
Note that the parameter to the message event callback (msg here) also includes a origin property that you can check to make sure you're only handling messages from expected senders.
The web page hosted in the IFRAME calls postMessage in the onclick event handler of a button (you'll probably want to pull the invocation a separate .js file versus in-line)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
This is webpage.html loaded into an iFrame
<button id="button" onclick="window.parent.postMessage('Hello from Web Context', '*');">Say Hello</button>
</body>
</html>
My controller, in a nutshell is this:
chart1.SeriesCollection.Add(SC);
using (MemoryStream ms = chart1.GetChartStream())
{
return File(ms.ToArray(), "image/png");
}
My view is this:
$('#targetDiv').load("Home/GetImage");
And I'm getting garbled characters when rendered. Any ideas?
thanks,
rodchar
You need to use an img tag:
<img src="Home/GetImage" alt="" />
When you write $('#targetDiv').load("Home/GetImage"); you are basically saying: send a GET requets to Home/GetImage using Ajax and if the request succeeds update the contents of #targetDiv with the result. As your controller action sends binary data, this binary data will be injected into the div.
You should set the content type of your response to accommodate the fact you're sending back an image. If you don't your binary stream will be interpreted as text, hence the garbled stuff you get.
There's a related question here: Can an ASP.NET MVC controller return an Image?
Try adding this to your code, before you read the file and send it back
this.Response.Clear();
this.Response.ContentType = "image/png";
on the markup side instead of putting the content into a div you need to put it into an image tag.
I have been developing a service that allows users to insert information from my database onto their sites by using iframes. The only problem was that the iframe needs to be resizeable and this is one of the biggest problems with iframes as most people already know, aswell as the fact I can access objects on the parent page from within the iframe and vice versa.
I have thought of making an asp.net web servie to server up the HTML and access it by using a get request. However this also has a problem since these request can only be made from the same domain?
What I need to know is the best way to retrieve a small piece of HTML containing customer reviews from server and display it on their page using some sort of AJAX.
Thanks
if your users can add a < script > line to their site pointing to code on your site, you can fairly easily offer a mechanism to build a floating (and resizable) DIV on their page that you jquery.load() with content from your site ...
example:
"To use my service on your site, add the following line to your < head >"
<script type='text/javascript' src='http://mysite.com/scripts/dataget.js />
then add a link or button anywhere and give it a class 'get-date-from-mysite'
< input type='button' value='Click to see the data' class='get-data-from-mysite' />
--
Then in that script you do (something like):
$(function() {
$('.get-data-from-mysite').click(function() {
$('body').append("<div id='mydiv' 'style=position:absolute; z-index:999; left: ...
$('#mydiv').load(' .... // url that sends html for content
});
...etc
resize-able div stuff needs to be added too
I think the jQuery library might be what you need - specifically, look into jQuery Ajax.
Following on what Scott Evernden is explaining, you can add a <script> tag such as:
<script id="my_script_tag" type='text/javascript' src='http://mysite.com/scripts/dataget.js' />
Inside dataget.js you can simply reference the script tag itself by using its "id" (document.getElementById("my_script_tag");) and replace it (insertBefore()) with relevant data.
To get the data from your server you can use JSONP (lots of stuff on SO as well), which is an ajax technique for cross-domain communication.