赞
踩
最近在开发同屏,做了个Dome,记录下成果!
首先是web端和服务器端,这里我使用node.js来做的
服务端:service.js
- var http = require('http');
- var sio = require('socket.io');
- var fs = require('fs');
- var server = http.createServer(function(req,res){
- res.writeHead(200,
- {
- 'Content-type':'text/html'
- }
- );
- res.end(fs.readFileSync('./main.html'));
- });
-
- server.listen(8083);
- var socket = sio.listen(server);
- var webs = socket;
- socket.on('connection',function(socket){
- console.log("Connection...");
-
-
- setTimeout(function(){
- socket.emit('news',{shuju:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAAArCAYAAADSSqyMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphZjg5Njc3Mi01MWVhLTUxNDUtOTBiNS00YmI5M2I5MWEyZDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBCRTQyNDlDQTg2MTFFNkExQjlGQzgwNDkwMzhDMTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBCRTQyNDhDQTg2MTFFNkExQjlGQzgwNDkwMzhDMTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmEzM2Y2NjI4LTljMWUtNDBkZC05MWE4LWZjZDVlZmI0ZDNjNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphZjg5Njc3Mi01MWVhLTUxNDUtOTBiNS00YmI5M2I5MWEy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'});
- },1000);
-
- setTimeout(function(){
- socket.emit('news',{shuju:'data:image/jpeg;base64,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'});
- },3000);
-
-
- socket.on('users',function(data){
- console.log(data)
- if(data=="web"){
- webs = socket;
- }
- });
-
- socket.on('data',function(data){
- console.log("data is OK..");
- webs.emit('news',{shuju:data});
- });
-
- })

web端接收图片显示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>MAIN</title>
-
- </head>
- <body>
- <img id="imgs" style="width:100%" src=""/>
- </body>
- <script src="http://abcwhatsappad.com:8080/wa/dist/easyui/jquery.min.js"></script>
- <script src="http://cdn.bootcss.com/socket.io/1.7.3/socket.io.js"></script>
- <script>
- var socket = io.connect("ws://192.168.1.194:8083");
- socket.emit("users","web");
- socket.on('news',function(data){
- $(function(){
- $("#imgs").attr("src",data.shuju);
- });
- });
- </script>
- </html>

接下来是Android端,这里要求是在5.0以下版本上开发同屏功能,我找了好多网上案例,现在也只能做到截图传输,效果也不尽人意。
首先导入io.socket有关的jar包:engine.io-client-0.8.3.jar, okhttp-3.6.0.jar,okio-1.11.0.jar,socket.io-client-0.8.4-SNAPSHOT.jar
连接服务器:SocketStreamWork.java
- public class SocketStreamWork implements Runnable {
- private static final String TAG = "Alin-SocketStreamWork";
- private final static String SOCKET_SERVER_URL = "http://192.168.1.194:8083";
- private static final String IMAGE_TITLE = "data:image/png;base64,";
-
- private Socket mSocket;
- private boolean isConnected;
- private String result;
-
- public SocketStreamWork(String result) {
- this.result = result;
- }
-
- @Override
- public void run() {
- //建立Socket连接
- Log.e(TAG, "run");
- initSocketHttp();
- connectSocket();
- }
-
- private void initSocketHttp() {
- try {
- mSocket = IO.socket( SOCKET_SERVER_URL ); // 初始化Socket
- Log.e(TAG, "initSocketHttp");
- } catch ( URISyntaxException e ) {
- e.printStackTrace();
- }
- }
-
- private void connectSocket() {
- try {
- mSocket.connect();
- mSocket.emit("data", IMAGE_TITLE + result);
- Log.e(TAG, "connectSocket");
- } catch (Exception e ) {
- e.printStackTrace();
- }
-
- mSocket.on( Socket.EVENT_CONNECT, onConnect );// 连接成功
- mSocket.on( Socket.EVENT_DISCONNECT, onDisconnect );// 断开连接
- mSocket.on( Socket.EVENT_CONNECT_ERROR, onConnectError );// 连接异常
- mSocket.on( Socket.EVENT_CONNECT_TIMEOUT, onConnectTimeoutError );// 连接超时
- mSocket.on( "data", onConnectMsg );// 监听消息事件回调
- }
-
- private void disConnectSocket() {
- mSocket.disconnect();
- mSocket.off( Socket.EVENT_CONNECT, onConnect );// 连接成功
- mSocket.off( Socket.EVENT_DISCONNECT, onDisconnect );// 断开连接
- mSocket.off( Socket.EVENT_CONNECT_ERROR, onConnectError );// 连接异常
- mSocket.off( Socket.EVENT_CONNECT_TIMEOUT, onConnectTimeoutError );// 连接超时
- mSocket.off( "data", onConnectMsg );// 监听消息事件回调
- }
-
- private Emitter.Listener onConnectMsg = new Emitter.Listener() {// 监听消息事件回调
- @Override
- public void call( final Object... args ) {
- // 在这里处理你的消息
- Log.e( TAG, "服务器返回来的消息 : " + args[0] );
- }
- };
-
- /*实现消息回调接口*/
- private Emitter.Listener onConnect = new Emitter.Listener() {// 连接成功
- @Override
- public void call( final Object... args ) {
- Log.e( TAG, "连接成功 ");
- if (!isConnected) { // 如果已经断开,重新发送
- /*try {
- mSocket.emit("data", result);
- } catch (Exception e ) {
- e.printStackTrace();
- }*/
- isConnected = true;
- }
- }
- };
-
- private Emitter.Listener onDisconnect = new Emitter.Listener() {// 断开连接
- @Override
- public void call( Object... args ) {
- Log.e( TAG, "断开连接 " + args[0] );
- isConnected = false;
- }
- };
-
- private Emitter.Listener onConnectError = new Emitter.Listener() {// 连接异常
- @Override
- public void call( final Object... args ) {
- Log.e( TAG, "连接 失败" + args[0] );
- }
- };
-
- private Emitter.Listener onConnectTimeoutError = new Emitter.Listener() {// 连接超时
- @Override
- public void call( final Object... args ) {
- Log.e( TAG, "连接 超时" + args[0] );
-
- }
- };
- }

截取屏幕图片:ScreenUtil.java
这里使用的是adb截屏功能,截取的图片是保存在路径里的,要获取还是要用FileInputStream()方法获取
public class ScreentUtil {
- private static final String TAG = "ScreentShotUtil";
- private static final String CLASS1_NAME = "android.view.SurfaceControl";
- private static final String CLASS2_NAME = "android.view.Surface";
- private static final String METHOD_NAME = "screenshot";
-
- private static ScreentUtil screentShotUtil;
- private Display mDisplay;
- private DisplayMetrics mDisplayMetrics;
- private Matrix mDisplayMatrix;
- private WindowManager wm;
- private SimpleDateFormat format;
- private static File outputImage = null;
-
- public static ScreentUtil getInstance(){
- synchronized (ScreentUtil.class) {
- if (screentShotUtil == null){
- screentShotUtil = new ScreentUtil();
- }
- }
- return screentShotUtil;
- }
-
- private Bitmap screenShot(int width, int height){
-
- Log.i(TAG, "android.os.Build.VERSION.SDK : " + android.os.Build.VERSION.SDK_INT);
- Class<?> surfaceClass = null;
- Method method = null;
- try{
- Log.i(TAG, "width : " + width);
- Log.i(TAG, "height : " + height);
- if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN_MR2){
- surfaceClass = Class.forName(CLASS1_NAME);
- } else {
- surfaceClass = Class.forName(CLASS2_NAME);
- }
-
- method = surfaceClass.getDeclaredMethod(METHOD_NAME, new Class[]{int.class, int.class});
- method.setAccessible(true);
- return (Bitmap) method.invoke(null, width, height);
- }catch (NoSuchMethodException e){
- Log.e(TAG, e.toString());
- }catch (IllegalArgumentException e){
- Log.e(TAG, e.toString());
- }catch (IllegalAccessException e){
- Log.e(TAG, e.toString());
- }catch (InvocationTargetException e){
- Log.e(TAG, e.toString());
- }catch (ClassNotFoundException e){
- Log.e(TAG, e.toString());
- }
- return null;
- }
-
- /**
- * Takes a screenshot of the current display and shows an animation.
- * @return
- */
- @SuppressLint("NewApi")
- public Bitmap ScreenShot(Context context){
- Bitmap mBitmap = null;
- if(outputImage == null){
- format = new SimpleDateFormat("yyyyMMddHHmmss");
- String fileName = format.format(new Date(System.currentTimeMillis())) + ".png";
- File path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM);
- outputImage = new File(path, fileName);
- Log.e("Alin", "path : " + path + " , outputImage : " + outputImage);
- }
- if(ShellUtil.checkRootPermission()){
- if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH){
- ShellUtil.execCommand("/system/bin/screencap -p "+ outputImage, true);
- Log.d("Alin", "保存截图");
- if(outputImage.exists()){
- try {
- mBitmap = FileUtil.getInstance().getBitmapFromBytes(FileUtil.getInstance().readInputStream(new FileInputStream(outputImage)), null);
- } catch (Exception e) {
- e.printStackTrace();
- }
- }
- }
- } else {
- if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH){
- wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
- mDisplay = wm.getDefaultDisplay();
- mDisplayMatrix = new Matrix();
- mDisplayMetrics = new DisplayMetrics();
- // We need to orient the screenshot correctly (and the Surface api seems to take screenshots
- // only in the natural orientation of the device :!)
- mDisplay.getRealMetrics(mDisplayMetrics);
- float[] dims = {
- mDisplayMetrics.widthPixels/2, mDisplayMetrics.heightPixels/2
- };
- float degrees = getDegreesForRotation(mDisplay.getRotation());
- boolean requiresRotation = (degrees > 0);
- if (requiresRotation){
- // Get the dimensions of the device in its native orientation
- mDisplayMatrix.reset();
- mDisplayMatrix.preRotate(-degrees);
- mDisplayMatrix.mapPoints(dims);
- dims[0] = Math.abs(dims[0]);
- dims[1] = Math.abs(dims[1]);
- }
- Bitmap mScreenBitmap = screenShot((int) dims[0], (int) dims[1]);
- if (requiresRotation){
- // Rotate the screenshot to the current orientation
- Bitmap ss = Bitmap.createBitmap(mDisplayMetrics.widthPixels/2, mDisplayMetrics.heightPixels/2,
- Bitmap.Config.RGB_565);
- Canvas c = new Canvas(ss);
- c.translate(ss.getWidth() / 2, ss.getHeight() / 2);
- c.rotate(degrees);
- c.translate(-dims[0] / 2, -dims[1] / 2);
- c.drawBitmap(mScreenBitmap, 0, 0, null);
- c.setBitmap(null);
- mScreenBitmap = ss;
- if (ss != null && !ss.isRecycled()){
- ss.recycle();
- }
- }
- // If we couldn't take the screenshot, notify the user
- if (mScreenBitmap == null){
- Toast.makeText(context, "Alin : screen shot fail", Toast.LENGTH_SHORT).show();
- }else {
- // Optimizations
- mScreenBitmap.setHasAlpha(false);
- mScreenBitmap.prepareToDraw();
- saveBitmap2file(context, mScreenBitmap, outputImage.toString());
- }
- mBitmap = mScreenBitmap;
- }
- }
- return mBitmap;
- }
-
- public void saveBitmap2file(Context context, Bitmap bmp, String fileName){
- //Log.e("Alin", bmp.getWidth()+"----------"+fileName);
- int quality = 100;
- ByteArrayOutputStream baos = new ByteArrayOutputStream();
- bmp.compress(Bitmap.CompressFormat.JPEG, quality, baos);
- InputStream is = new ByteArrayInputStream(baos.toByteArray());
- byte[] buffer = new byte[1024];
- int len = 0;
- File file = new File(fileName);
- if (!file.exists()){
- try{
- file.getParentFile().mkdir();
- file.getParentFile().createNewFile();
- }catch (IOException e){
- Log.e("Alin", e.toString());
- }
- }else{
- try{
- file.getParentFile().delete();
- file.getParentFile().createNewFile();
- }catch (IOException e){
- Log.e("Alin", e.toString());
- }
- }
- FileOutputStream stream = null;
- try{
- stream = new FileOutputStream(file);
- while ((len = is.read(buffer)) != -1){
- stream.write(buffer, 0, len);
- }
- stream.flush();
- }catch (FileNotFoundException e){
- Log.i(TAG, e.toString());
- }catch (IOException e){
- Log.i(TAG, e.toString());
- }finally{
- if (is != null) {
- try{
- is.close();
- } catch (IOException e) {
- Log.i(TAG, e.toString());
- }
- }
- if (stream != null){
- try{
- stream.close();
- }catch (IOException e){
- Log.i(TAG, e.toString());
- }
- }
- }
- if (bmp != null && !bmp.isRecycled()){
- bmp.recycle();
- }
- }
-
- /**
- * @return the current display rotation in degrees
- */
- private float getDegreesForRotation(int value){
- switch (value){
- case Surface.ROTATION_90:
- return 360f - 90f;
- case Surface.ROTATION_180:
- return 360f - 180f;
- case Surface.ROTATION_270:
- return 360f - 270f;
- }
- return 0f;
- }
- }

adb shell命令文件ShellUtil.java
- /**
- * ShellUtils
- * <ul>
- * <strong>Check root</strong>
- * <li>{@link ShellUtil#checkRootPermission()}</li>
- * </ul>
- * <ul>
- * <strong>Execte command</strong>
- * <li>{@link ShellUtil#execCommand(String, boolean)}</li>
- * <li>{@link ShellUtil#execCommand(String, boolean, boolean)}</li>
- * <li>{@link ShellUtil#execCommand(List, boolean)}</li>
- * <li>{@link ShellUtil#execCommand(List, boolean, boolean)}</li>
- * <li>{@link ShellUtil#execCommand(String[], boolean)}</li>
- * <li>{@link ShellUtil#execCommand(String[], boolean, boolean)}</li>
- * </ul>
- */
- public class ShellUtil {
-
- public static final String COMMAND_SU = "su";
- public static final String COMMAND_SH = "sh";
- public static final String COMMAND_EXIT = "exit\n";
- public static final String COMMAND_LINE_END = "\n";
-
- private ShellUtil() {
- throw new AssertionError();
- }
-
- /**
- * check whether has root permission
- *
- * @return
- */
- public static boolean checkRootPermission() {
- return execCommand("echo root", true, false).result == 0;
- }
-
- /**
- * execute shell command, default return result msg
- *
- * @param command command
- * @param isRoot whether need to run with root
- * @return
- * @see ShellUtil#execCommand(String[], boolean, boolean)
- */
- public static CommandResult execCommand(String command, boolean isRoot) {
- return execCommand(new String[] {command}, isRoot, true);
- }
-
- /**
- * execute shell commands, default return result msg
- *
- * @param commands command list
- * @param isRoot whether need to run with root
- * @return
- * @see ShellUtil#execCommand(String[], boolean, boolean)
- */
- public static CommandResult execCommand(List<String> commands, boolean isRoot) {
- return execCommand(commands == null ? null : commands.toArray(new String[] {}), isRoot, true);
- }
-
- /**
- * execute shell commands, default return result msg
- *
- * @param commands command array
- * @param isRoot whether need to run with root
- * @return
- * @see ShellUtil#execCommand(String[], boolean, boolean)
- */
- public static CommandResult execCommand(String[] commands, boolean isRoot) {
- return execCommand(commands, isRoot, true);
- }
-
- /**
- * execute shell command
- *
- * @param command command
- * @param isRoot whether need to run with root
- * @param isNeedResultMsg whether need result msg
- * @return
- * @see ShellUtil#execCommand(String[], boolean, boolean)
- */
- public static CommandResult execCommand(String command, boolean isRoot, boolean isNeedResultMsg) {
- return execCommand(new String[] {command}, isRoot, isNeedResultMsg);
- }
-
- /**
- * execute shell commands
- *
- * @param commands command list
- * @param isRoot whether need to run with root
- * @param isNeedResultMsg whether need result msg
- * @return
- * @see ShellUtil#execCommand(String[], boolean, boolean)
- */
- public static CommandResult execCommand(List<String> commands, boolean isRoot, boolean isNeedResultMsg) {
- return execCommand(commands == null ? null : commands.toArray(new String[] {}), isRoot, isNeedResultMsg);
- }
-
- /**
- * execute shell commands
- *
- * @param commands command array
- * @param isRoot whether need to run with root
- * @param isNeedResultMsg whether need result msg
- * @return <ul>
- * <li>if isNeedResultMsg is false, {@link CommandResult#successMsg} is null and
- * {@link CommandResult#errorMsg} is null.</li>
- * <li>if {@link CommandResult#result} is -1, there maybe some excepiton.</li>
- * </ul>
- */
- public static CommandResult execCommand(String[] commands, boolean isRoot, boolean isNeedResultMsg) {
- int result = -1;
- if (commands == null || commands.length == 0) {
- return new CommandResult(result, null, null);
- }
-
- Process process = null;
- BufferedReader successResult = null;
- BufferedReader errorResult = null;
- StringBuilder successMsg = null;
- StringBuilder errorMsg = null;
-
- DataOutputStream os = null;
- try {
- process = Runtime.getRuntime().exec(isRoot ? COMMAND_SU : COMMAND_SH);
- os = new DataOutputStream(process.getOutputStream());
- for (String command : commands) {
- if (command == null) {
- continue;
- }
-
- // donnot use os.writeBytes(commmand), avoid chinese charset error
- os.write(command.getBytes());
- os.writeBytes(COMMAND_LINE_END);
- os.flush();
- }
- os.writeBytes(COMMAND_EXIT);
- os.flush();
-
- result = process.waitFor();
- // get command result
- if (isNeedResultMsg) {
- successMsg = new StringBuilder();
- errorMsg = new StringBuilder();
- successResult = new BufferedReader(new InputStreamReader(process.getInputStream()));
- errorResult = new BufferedReader(new InputStreamReader(process.getErrorStream()));
- String s;
- while ((s = successResult.readLine()) != null) {
- successMsg.append(s);
- }
- while ((s = errorResult.readLine()) != null) {
- errorMsg.append(s);
- }
- }
- } catch (IOException e) {
- e.printStackTrace();
- } catch (Exception e) {
- e.printStackTrace();
- } finally {
- try {
- if (os != null) {
- os.close();
- }
- if (successResult != null) {
- successResult.close();
- }
- if (errorResult != null) {
- errorResult.close();
- }
- } catch (IOException e) {
- e.printStackTrace();
- }
-
- if (process != null) {
- process.destroy();
- }
- }
- return new CommandResult(result, successMsg == null ? null : successMsg.toString(), errorMsg == null ? null
- : errorMsg.toString());
- }
-
- /**
- * result of command
- * <ul>
- * <li>{@link CommandResult#result} means result of command, 0 means normal, else means error, same to excute in
- * linux shell</li>
- * <li>{@link CommandResult#successMsg} means success message of command result</li>
- * <li>{@link CommandResult#errorMsg} means error message of command result</li>
- * </ul>
- *
- * @author <a href="http://www.trinea.cn" target="_blank">Trinea</a> 2013-5-16
- */
- public static class CommandResult {
-
- /** result of command **/
- public int result;
- /** success message of command result **/
- public String successMsg;
- /** error message of command result **/
- public String errorMsg;
-
- public CommandResult(int result) {
- this.result = result;
- }
-
- public CommandResult(int result, String successMsg, String errorMsg) {
- this.result = result;
- this.successMsg = successMsg;
- this.errorMsg = errorMsg;
- }
- }
- }

文件操作类FileUtil.java
- public class FileUtil {
-
- private static FileUtil mFileUtil;
-
- public static FileUtil getInstance(){
- synchronized (FileUtil.class) {
- if (mFileUtil == null){
- mFileUtil = new FileUtil();
- }
- }
- return mFileUtil;
- }
-
- /**
- * InputStream to byte
- * @param inStream
- * @return
- * @throws Exception
- */
- public byte[] readInputStream(InputStream inStream) throws Exception {
- byte[] buffer = new byte[1024];
- int len = -1;
- ByteArrayOutputStream outStream = new ByteArrayOutputStream();
-
- while ((len = inStream.read(buffer)) != -1) {
- outStream.write(buffer, 0, len);
- }
-
- byte[] data = outStream.toByteArray();
- outStream.close();
- inStream.close();
-
- return data;
- }
-
- /**
- * Byte to bitmap
- * @param bytes
- * @param opts
- * @return
- */
- public Bitmap getBitmapFromBytes(byte[] bytes, BitmapFactory.Options opts) {
- if (bytes != null){
- if (opts != null){
- return BitmapFactory.decodeByteArray(bytes, 0, bytes.length,opts);
- }
- else{
- return BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
- }
- }
-
- return null;
- }
- }

使用Base64加密传输图片BitmapUtil.java
- public class BitmapUtil {
-
- private static final String TAG = "Alin";
-
- private static BitmapUtil mBitmapUtil;
- /**
- * bitmap转为base64
- * @param bitmap
- * @return
- */
-
- public static BitmapUtil getInstance(){
- synchronized (BitmapUtil.class) {
- if (mBitmapUtil == null){
- mBitmapUtil = new BitmapUtil();
- }
- }
- return mBitmapUtil;
- }
-
- public String bitmapToBase64(Bitmap bitmap) {
- Log.d(TAG, "-----bitmapToBase64-----" + bitmap);
- String result = null;
- ByteArrayOutputStream baos = null;
- try {
- if (bitmap != null) {
- baos = new ByteArrayOutputStream();
- bitmap.compress(Bitmap.CompressFormat.JPEG, 40, baos);
-
- baos.flush();
- baos.close();
-
- byte[] bitmapBytes = baos.toByteArray();
- result = Base64.encodeToString(bitmapBytes, Base64.DEFAULT);
- }
- } catch (IOException e) {
- e.printStackTrace();
- } finally {
- try {
- if (baos != null) {
- baos.flush();
- baos.close();
- }
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
- return result;
- }
-
- /**
- * base64转为bitmap
- * @param base64Data
- * @return
- */
- public Bitmap base64ToBitmap(String base64Data) {
- Log.d(TAG, "-----base64ToBitmap-----" + (base64Data == null));
- byte[] bytes = Base64.decode(base64Data, Base64.DEFAULT);
- return BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
- }
- }

最后我是用
service服务来运行的,这里就不在贴出来了。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。