Working with Static Images
There are several options when dealing with images through a
component.
You can simply save the image from the M-code to a drive somewhere
using print functionality (the front end references the physical file
directly). This is not ideal since the middle tier is behind the
firewall (and the front end is in front of it), incurring possible
security concerns with where the files reside.
Using Java, you can return a Java image object from M and use
it directly from the JSP or servlet by saving it to disk or converting
it to a byte stream.
Using a Static Image In a JSP Page
The simplest option is to return a data stream from your M-function
as a byte array — an encoded representation of your image,
a common paradigm used when storing and retrieving images from a database.
However, it is important to consider that only an IMG tag's
source can be set, not it's data. The most common solution to this
issue is to have the IMG tag's source reference
a servlet that streams the bytes out through the output stream. Although
direct communication between a presentation object and the middle
tier usually isn't recommended, in this case it is a good solution.
A common implementation is to designate a server that only serves
up images, keeping data services and image services separate, as shown
here:
<img src="http://localhost:
8080/Examples/ExamplesServlet?function=
imageBytesFromMWNumeric" alt="MATLAB IMAGE" />
Using a Static Image in a ASPX Page
Using ASPX Image objects is almost identical
to using HTML IMG tags. In this case, simply set
the ImageUrl (the source of image) to be the ASPX
page created in Deploying the ASPX.
You can also point to a Java middle-tier servlet that hosts the image.
<asp:Image
ID="Image1"
runat="server"
ImageUrl=
"http://localhost/Examples/Tester.aspx?function=
imageBytesFromMWNumeric" />
Interacting with Images Using JavaScript (for .NET or Java)
Although Creating a WebFigure on a JSP Page is a good solution
for most component models, sometimes a lightweight solution is needed
that you can customize for specific tasks.
JavaScript can be employed to dynamically request new images
depending on user input. Since JavaScript is not Java, it does not
require that Java Runtime be installed. JavaScript runs in a client's
browser and does not require a Java Web server. You can use this lightweight
implementation with any of the builders. This example uses the Raw
Image Bytes with Reorientation example in Hosting a DAO Using
a Java™ Web Service and Hosting the DAO with a Servlet. It waits for the user to
instigate a movement with the mouse (a mouse-drag "event")
and, when the events occur, calls the server to get a new image of
the new orientation. This example, while simple, can be extended
to do many other types of image interactions.
<iframe
src ="DynamicFigure.html?url=
http://localhost:8080/Examples/ExamplesServlet?function=
imageBytesFromMWNumericWithOrientation"
width="700"
height="700">
</iframe>
DynamicFigure.html is an AJAX application
that takes in a parameter (the base function that returns an image)
and accepts different orientation values:
<%@ page contentType=
"text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false"%>
<html>
<head>
<title>AJAX Figure Manipulation</title>
<script type="text/javascript">
var rotationDegree = 0;
var elevationDegree = 0;
var startDragX = 0;
var startDragY = 0;
var mouseisdown = false;
function getParam(name)
{
var start=location.search.indexOf("?"+name+"=");
if (start<0) start=location.search.indexOf("&"+name+"=");
if (start<0) return '';
start += name.length+2;
var end=location.search.indexOf("&",start)-1;
if (end<0) end=location.search.length;
var result='';
for(var i=start;i<=end;i++) {
var c=location.search.charAt(i);
result=result+(c=='+'?' ':c);
}
return unescape(result);
}
function updateView()
{
var urlStr = getParam("url") +"&" +
"imageFormat=png" + "&" +
"rotation=" + rotationDegree + "&" +
"elevation=" + elevationDegree + "&" +
"width=" + contentBox.clientWidth + "&" +
"height=" + contentBox.clientHeight;
var requestedImage = document.getElementById('currentImage');
requestedImage.src = urlStr;
requestedImage.style.visibility = 'visible';
}
function stopDragging(updateX,updateY)
{
rotationDegree +=
Math.round(((startDragX -
updateX)/2)%360);
elevationDegree +=
Math.round(-(startDragY -
updateY)/2);
updateView();
}
</script>
</head>
<body onresize='updateView();'>
<form name=exf1>
X Drag <input type=text name=x value="0">
Y Drag <input type=text name=y value="0">
</form>
<div style='position:absolute; background:
url("matlab.gif"); left:0; right:0;
width:100%; height:100%;'>
<img style="visibility: hidden; position:absolute;
width:100%; height:100%; left:0;
top:0" src="matlab.gif"
id="currentImage">
</div>
<div id='contentBox'
style='position:absolute; background:
url("transparent_pixel.gif");
left:0; top:0; background-color:
<%= request.getParameter("color") %>;
width:100%; height:100%; overflow:hidden;'
onmousedown="mouseisdown = true; startDragX=event.clientX;
startDragY=event.clientY;"
onmouseup="mouseisdown =
false;stopDragging(event.clientX, event.clientY);
document.exf1.x.value=0; document.exf1.y.value=0;"
onmousemove="if(mouseisdown)
{document.exf1.x.value=event.clientX-startDragX;
document.exf1.y.value=event.clientY-startDragY;}">
</div>
<script type="text/javascript">
updateView();
</script>
</body>
</html>
 | Creating a WebFigure on an ASPX Page | | Displaying Complex Data Types Including Arrays and Matrices |  |
Includes the most popular MATLAB recorded presentations with Q&A sessions led by MATLAB experts.
Get the Interactive Kit
Store 
