1.in wcf side,build RESTful wcf
this step,you can reference http://www.cnblogs.com/tuolin/archive/2012/01/10/2318058.html
2.in android side,using phonegap
package com.sangeco.garden;
import android.os.Bundle;
import com.phonegap.DroidGap;
import com.sangeco.biz.JsBridge;
public class WebActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.init();
JsBridge jsBridge=new JsBridge(this,appView);
appView.addJavascriptInterface(jsBridge, "jsBridge");
super.loadUrl("file:///android_asset/html/pot.html");
}
}
package com.sangeco.biz;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.util.UUID;
import org.json.JSONException;
import org.json.JSONObject;
import com.phonegap.DroidGap;
import android.R.integer;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.net.Uri;
import android.util.Base64;
import android.webkit.WebView;
public class JsBridge {
private WebView webView;
private DroidGap mGap;
public JsBridge(DroidGap gap, WebView view) {
this.mGap = gap;
this.webView = view;
}
public JsBridge() {
}
public String getBase64Image(String src) {
String base64 = "";
try {
// FileInputStream fInputStream = new FileInputStream(imgFile);
// fInputStream.read(content, 0, size);
// String base64 = Base64.encodeToString(content, Base64.DEFAULT);
Uri imgUri = Uri.parse(src);
InputStream inputStream = mGap.getContentResolver()
.openInputStream(imgUri);
Bitmap bm=BitmapFactory.decodeStream(inputStream);
// 获得图片的宽高
int width = bm.getWidth();
int height = bm.getHeight();
// 设置想要的大小
int newWidth = 400;
int newHeight = height*newWidth/width;
// 计算缩放比例
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 取得想要缩放的matrix参数
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的图片
Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix,true);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
newbm.compress(Bitmap.CompressFormat.JPEG, 100, baos); //bm is the bitmap object
byte[] content = baos.toByteArray();
// int length = inputStream.available();
// byte[] content = new byte[length];
// inputStream.read(content, 0, length);
base64 = Base64.encodeToString(content, Base64.DEFAULT);
} catch (Exception e) {
// TODO Auto-generated catch block
base64 = e.getLocalizedMessage();
e.printStackTrace();
}
return base64;
}
public String uploadImage(String wcf, String src) {
String rtnVal = "";
String filename=UUID.randomUUID().toString()+".png";
try {
JSONObject obj = new JSONObject();
obj.put("name", filename);
obj.put("content", getBase64Image(src));
obj.put("type", "png");
obj.put("id", "");
JSONObject image = new JSONObject();
image.put("image", obj);
String json = new JsonTruck().doPost(wcf, image);
JSONObject jsonObject=new JSONObject(json);
rtnVal=jsonObject.getString("UploadResult");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return rtnVal;
}
public String downloadImage() {
return null;
}
}
3.in html,javascipt call java method,and jquery
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
<title>add pot page</title>
</head>
<body>
<h1>Add pot</h1>
<div>
<img src='../image/404.png' id='test' style='width:300px'>
<ul>
<li ontouchstart="camera();">
<img src='../image/camera.png'/>
</li>
<li ontouchstart="getPhoto(pictureSource.PHOTOLIBRARY);">
<img src='../image/file.png'/>
</li>
</ul>
</div>
<div>
<h1>pot name</h1>
<input type="text" id="name"/>
</div>
<div>
<h1>pot price</h1>
<input type="text" id="price"/>
</div>
<div>
<h1>pot description</h1>
<textarea cols='25' rows='10' id='desc' ></textarea>
</div>
<div>
<h1>note</h1>
<textarea cols='25' rows='10' id='note' ></textarea>
</div>
<div>
<input type='button' value='save' id="btnSave">
<img src='' id='test2' width='150px' height='150px'/>
</div>
<script type='text/javascript' src='../js/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../js/phonegap-1.4.1.js'></script>
<script type='text/javascript' src='../js/wcf.js'></script>
<script type='text/javascript' src='../js/camera.js'></script>
<script type='text/javascript'>
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
$(function(){
$("#btnSave").bind('touchstart', function(){
var img_name=window.jsBridge.uploadImage("http://192.168.1.100/gardener/photo/upload",IMG_SRC);
alert(img_name);
if(img_name!=null&&img_name!=""&&img_name!="error"){
var json = {
pot: {
id: '',
name: $('#name').val(),
price: $('#price').val(),
desc: $('#desc').val(),
img: img_name,
note: $('#note').val()
}
};
wcf="http://192.168.1.100/gardener/gardener/AddPot";
alert(JSON.stringify(json));
doPost(wcf,json);
}
downloadImage(img_name);
});
});
</script>
</body>
</html>
var WCF = "http://192.168.1.100/gardener/photo";
function uploadImage(img){
$.ajax({
type: "POST",
contentType: "application/json",
data: '',
url: WCF + "/upload",
success: function(msg){
alert(msg.AddPotResult);
},
beforeSend: function(){
alert('');
},
error: function(xhr){
alert('error');
}
});
}
function downloadImage(src){
var wcfUrl = WCF + "/download/" + src;
var img = $("#test2");
$.ajax({
type: "GET",
contentType: "application/json",
url: wcfUrl,
success: function(msg){
alert(msg.DownloadResult);
img.attr("src", "data:image/png;base64," + msg.DownloadResult);
},
beforeSend: function(){
alert(wcfUrl);
},
error: function(xhr){
img.attr("src", "../image/camera.png");
}
});
return img;
}
function doPost(wcfUrl, jsonData){
$.ajax({
type: "POST",
contentType: "application/json",
url: wcfUrl,
data: JSON.stringify(jsonData),
success: function(msg){
alert('ok');
},
beforeSend: function(){
alert('doPost method is called');
},
error: function(xhr){
alert('error');
}
});
}
