Debugging a Published Cloud Service with IntelliTrace and Visual Studio

Take a look at this link: http://msdn.microsoft.com/en-us/library/windowsazure/ff683671.aspx. It contains the steps to enable and download IntelliTrace files back to diagnosis log files in Cloud Service on Windows Azure.

Saving and Restoring State in a Windows Store App (C#/XAML)

Walk to this link: http://blogs.msdn.com/b/robertgreen/archive/2013/01/30/saving-and-restoring-state-in-a-windows-8-xaml-app.aspx.

He already show how to drive down step by step and make me clear where to configure the code for how to save and restore state in Windows Store App.

Web Test Recorder on Internet Explorer 11

Recently, I have got a problem about using Web Test Recorder after upgrading to Windows 8.1. It has come with the new version of internet explorer i.e. version 11. That doesn't compatible with current Web Test Recorder version (we have to wait until new release to support IE11). However, there is a workaround for this problem. Try to disable Enhanced Protected Mode, then it should work. If not, follow this link: http://blogs.msdn.com/b/visualstudioalm/archive/2013/09/16/using-internet-explorer-11-and-not-able-to-record-a-web-performance-test-successfully.aspx. It contains information to disable something new which doesn't support on Web Test Recorder.

Convert a color image to a greyscale image using Python Imaging Library

Recently, I have a chance to do some image processing tasks because of my lacking in term of using application like GIMP. I just want to do very easy task to convert a color image to a greyscale image because my printer cannot do color printing and set for black and white. I know it is very easy task with we can use some programs to do it instead of Image Processing program like GIMP or Photoshop. For me, I can do some Python programming then decide to write a small program to convert a color image to grey scale image within 5 minutes (from start writing a code and done processing).

In Python, we can use a lightweight library but easy and powerful to use to do Image Processing tasks that is Python Imaging Library. Before do converting task, we need to know some basis about Image Processing first.

The first thing that we should know is the color mode. In Image Processing there are many color modes which each mode is appropriate for some kind of tasks such as binary image (just black or white like a picture in Game Boy), 8-bit black and white (greyscale image), RGB (3x8-bit), etc. for more details can look at http://effbot.org/imagingbook/concepts.htm.

Okay, we have just known the image color system in Python Imaging Library. To convert a color image (usually RGB image) to greyscale image, it is not difficult because Python Imaging Library already provide the function to convert image mode. The code to convert has shown below:

from PIL import Image 
input_filename = 'input.png'
output_filename = 'output.png'
image_file = Image.open(input_filename)
# L refers to 8-bit pixels, black and white in Python Imaging Library
image_file = image_file.convert('L')
image_file.save(output_filename)

The step is load an image to the buffer then convert an image mode and save to another image file.

It's not hard but quite fun if we can play more interesting features in Python Imaging Library. With this code, we can convert an image within a sec :)

Example (Asuna from SAO):

Before

After

Reference: The Python Imaging Library Handbook

JavaScript control attributes for Windows Store Apps (data-win-* attributes)

Lately, I have done something mostly related to Windows Store App and I'm also interested in JavaScript. This language is very powerful in so many ways. It's easy to entry, you just have a browser and a text editor then your can start develop something. However, JavaScript is easy to start, but it is not easy to be mastered. I'm not a JavaScript professional, not even a web developer. But when compared the learning curve between JavaScript and Strong-Typed Languages (such as Java, C#). By the way, this post is not about language technologies.

JavaScript is powerful enough to make it be a one of native languages of Windows Store App. In this post would like to give introduction about added-on attributes to make html elements transformed into Windows Store controls.

The first one is "data-win-control". It is a very important attribute to create WinJS controls by giving them a control name then call process UI to apply controls on the startup. This attribute can't not be used on iframe element.

HTML

<div data-win-control="controlName" />

JavaScript

(function( ) {

    document.addEventListener("DOMContentLoaded", function(e) {
        WinJS.UI.processAll();
    });

})();

The next one is "data-win-options". It can receive a JavaScript object to set that control properties.

HTML

<div 
    data-win-control="control" 
    data-win-options="{ property1 : value1, property2 : value2}">
</div>

It can also do binding data as XAML does using "data-win-bind" (with some code in JavaScript side).

HTML

    <element data-win-bind="elementProperty1 : dataSourceProperty1; elementProperty2: dataSourceProperty2" />

To make elements can't be selected, use "data-win-selectable" property. It is just a true / false value. By default, all input elements and elements with the contentEditable attribute set to true are selectable.

HTML

<div data-win-selectable="true" ...

The controls can be binded with external resources for localization or other purposes using "data-win-res".

HTML

<p data-win-res="{textContent: 'String1'}"></p>

For the "data-win-fragmentLoad" property, the document said that this will be removed from the next version of Windows Library for JavaScript. So, I think we should not use it.

Reference: Windows Library for JavaScript control attributes

JavaScript class and namespace

The following links are the basic link provide the information how to create namspace and class in JavaScript.

• 3 ways to define a JavaScript class
• Javascript Namespace Declaration
• Private Static Members in Javascript

The following example is to show how to create basic namespace and class. The namespace is name "NS" then create class in that namespace "Sound". Sound class has instance variable "name". and class variable "Variable". Also has the class method "Method1" and "Method2" which can be used like static method in Java or C#. After that this html page will be processed when document loaded and print out "love story 3".

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript">
  var NS = NS || {};
  
  NS.Sound = function (name) {
   this.name = name;
  }
  
  NS.Sound.Variable = [];
  
  NS.Sound.Method1 = function () {
   NS.Sound.Variable.push(1);
   NS.Sound.Variable.push(2);
   NS.Sound.Variable.push(3);
  }
  
  NS.Sound.Method2 = function () {
   return NS.Sound.Variable.length;
  }
  
  function onLoad() {
   var sound = new NS.Sound("lovestory");
   var div = document.getElementById("content");
   
   NS.Sound.Method1();
   var content = sound.name + " " + NS.Sound.Method2();
   
   div.innerHTML = content;
  }
  
  document.addEventListener("DOMContentLoaded", onLoad, false);
  </script>
 </head>
 <body>
  <div id="content"></div>
 </body>
</html>

Download ISO files from IIS

Normally IIS won't allow the clients to contact unknown extensions in the server. ISO is not set by IIS default. In order to do that, we need to configure MIME Types on IIS with the following steps:

- Open IIS.

- Select the the server then select MIME Types.

- Add .iso extension as application/octet-stream.

- Ok

After that you can access ISO as octet steam which can be applied to almost any binary file.

Step-by-Step Guide for Setting Up Windows Server 2012 Domain Controller

To set up domain controller, can take a look on the following link: http://social.technet.microsoft.com/wiki/contents/articles/12370.step-by-step-guide-for-setting-up-windows-server-2012-domain-controller.aspx.

How to Profiling an application in Visual Studio

Profiling in Visual Studio is a powerful tool to help you identify performance issue based on a multitude of factors. In this post, just give a link to a useful sources for the basic profiling usage here.



References:

1. Profiling an application with Visual Studio – CPU Sampling
2. Understanding Sampling Data Values in Profiling Tools
3. Profiling Tools Performance Session Overview
4. How to profile a XAML Windows Store App
5. Understanding Profiling Methods

An example experience to manage money and reach the target (TH)

This blog here, he share his experience to manage his money and reach his target without stock trading.

How to change password policy for group and domain in Windows Server 2012

To change password policy for Windows Server, we can change by the following steps:
- Open Control Panel
- Select System and Security
- Select Administrative Tools
- Double clicks at Group Policy Management
- Under Domains tab, open Group Policy Objects
- Then will see Default Domain Policy, right click and select Edit.
- It will show Group Policy Management Editor, open the following tab Computer Configuration -> Policies -> Windows Settings -> Security Settings -> Account Policies -> Password Policy.

Hadoop (HDInsight) on Windows 8

The following link will describe how to install Hadoop on Windows 8 clearly: http://marktab.net/datamining/2012/10/31/install-microsoft-hdinsight-server-hadoop-windows-8-professional/.

Windows Performance Analyzer Series

There are tools for Windows that can be used to visualize the trace files from ETW. It is Windows Performance Analyzer (WPA) which is a part of Windows Performance Toolkit.
These links below are the WPA series from channel9:

• Capturing and analyzing performance traces
• Customizing WPA Trace Views
• Understanding pool usage using Windows Performance Analyzer
• Understanding heap data using Windows Performance Analyzer
• Understanding VirtualAlloc usage using Windows Performance Analyzer

It is really suit for who new to performance tracing to know how to analyze data using WPA.

Hadoop on Windows Azure

This post is to show you overview about Hadoop on Azure.



References:

1. Channel9: Hadoop on Windows Azure
2. MSDN: Windows Azure - Hadoop on Windows Azure

How to measure UI Rendering time and FPS for Windows Store Apps (C# / XAML)

To measure performance for Windows Store Apps, if you have no experience before, I would recommend you to look at this session first: http://channel9.msdn.com/Events/Build/2012/4-103. He will explain the concepts to capture Windows Store Apps performance tips.

In short, XAML Operations are broken down into frames, and follows these 3 main steps:

1. Parsing: parse XAML for any objects

2. Layout: put objects, and determine their layout

3. Rendering: draw visible objects

To capture UI rendering time easier, think about the followings things:
1. Scenario: understand and know which parts that want to trace. Try to break down into atomic parts, it will be more clear for design scenario steps.

2. Steps of the trace scenario: it will notice us where our trace begins or ends in the trace file.

3. If in the same scenario contains sub parts such as loading items then scrolling down to the last items, try to make a self-marker (known by yourself) to separate sub tasks clearly.
4. When draw objects don't have to be re-draw, Frame will not be produced. Mouse interaction will produce frames only it trigger events on specific objects such as mouse over on objects then that object will have hover animation (re-draw frames).

Here is a command to capture UI Frame behavior:

@if %_echo%!==! echo off

set UserOptions=-BufferSize 1024 -MinBuffers 32 -MaxBuffers 32 -Buffering
set KernelOptions=-BufferSize 1024 -MinBuffers 64 -MaxBuffers 64 -Buffering

xperf -start xaml_user -on "Microsoft-Windows-XAML::5"+perftrack %UserOptions%
xperf -on base+cswitch %KernelOptions%

xperf -m BeginTrace
echo Event listeners started, run desired scenario then press any key
pause
xperf -m EndTrace

echo stopping xaml_kernel...
xperf -flush -f xaml_kernel.etl
xperf -stop

echo stopping xaml_user...
xperf -flush xaml_user -f xaml_user.etl
xperf -stop xaml_user

echo merging to xaml_merged.etl...
xperf -merge xaml_user.etl xaml_kernel.etl xaml_merged.etl

The command you see is a xperf command to capture XAML behavior which we can use it to monitor UI Frame Rendering time.

Now, let's see the real example. I will use Kona project in codeplex to demonstrate how to trace UI Rendering time and FPS. You can install and follow the example scenario I given.

Example Scenario: Capture UI rendering time of Bikes Category page, then scroll to the right and left

Steps:

1. Click at the header Bikes category
    

2. Waiting for all items are loaded into the page
3. Scroll page to the right using mouse wheel
    

4. Scroll page to the left using mouse wheel

Open trace file using WPA (Windows Performance Analyzer)

1. On the left side select System Activity, then there are more items expanded.
2. Select Generics events, an analysis tab will be shown.

3. Select Provider Name Microsoft-Windows-XAML.
4. Select Task Names that related to the scenario e.g. Frame, PointerDown, PointerUp, PointerLeave, PointerUpdate, PointerWheel.

5. Right click, and select filter selection.

Analyze trace file

1. We know that scenario start from the first click at Bikes category header, and page will be navigated after mouse is up then we do long wait for UI rendering. So, we know immediately when it starts and stops.
    

2. Zoom in, and we know that page is rendered after XAML is parsed. So, the Frame interval followed ParseXaml is the UI rendering frames for drawing objects on the screen (Duration 1.1 seconds).
    

3. The next sub part is after we do long wait and begin-end using mouse wheel. We can easily look at where PointerWheel start and stop that is the interval for scrolling items to right and left. To measure scrolling, it is difficult to measure in term of finding the longest gap between frames or longest interval because of UI thread will not produce frames when no re-draw objects (need to scroll mouse wheel accurately and continuously), which lead to calculate using FPS instead.

Calculate FPS UI Thread

1. In some scenarios, they don't create or load any objects just move or animate around the page. In order to measure it and detect UI glitch in overall using FPS (frames per second) is may be a good choice.
2. From scrolling, zoom in to that part. And open Frame tab to see how many frames in that time range.
    

3. There are 300 frames during 6.77 seconds, so the scrolling FPS is 44.3.

In conclusion, I still don't know the best way to trace UI glitch or at least find out the root problem if it is glitched yet (to know it is glitched because of what). However, based on the link I gave above, we can adjust the number of elements shown on the screen and remove overdraw elements or animations to improve application performance.

Last but not least, information in this post, I have tried by myself and no guarantee that this is right or wrong. Please read and consider by yourself.

Delete project from TFS 2012

If you have ever used TFS, you can create a new project from Visual Studio directly. However, to delete a project, you need to use Team Foundation Server Console in a remote server which is not available in sometimes such as https://tfs.visualstudio.com/. You cannot access the server directly. So, the solution is we need to access remotely using command line tool from Visual Studio.
- Open Developer Command Prompt for VS2012
- The syntax command is TFSDeleteProject [/q] [/force] [/excludewss] /collection:URL TeamProjectName
- Example: TFSDeleteProject /collection:"https://xxx.visualstudio.com/DefaultCollection/" "Project X"

Change IE security setting to normal in Windows Server 2012

By default Internet Explorer (IE) in Windows Server is protected with some security to prevent unintentionally attacked during browse internet. Sometimes, we want it to be just a normal IE that trusts how user use it. In order to do that in Windows Server 2012 is described as follows:

Firstly, opens Server Manager page.

Next, on the top of Dashboard under welcoming message, clicks at "Configure this local server" as shown picture below.

Then, on properties tab, you will see information is divided into 2 sides. Look at the right side. You will see "IE Enhanced Security Configuration", it should be on if your IE is still protected. So, we gonna change it off. by click at it.

After you click it, a popup will be opened. Your job is changing to off as shown below.

Click OK and wait for a while during system setting is changing. When it finished, you will notice on properties tab "IE Enhanced Security Configuration" is changed to Off.

Remove Remote Desktop Entries from Remote Desktop Connection

Steps to remove are described as follows:

1. Click start or press Windows button, it will show application screen.
2. Type "regedit", it will search and show only one program.
3. Select that "regedit.exe".
4. On the left hand side of the program, it is a navigation panel. Then you can easily navigate to "HKEY_CURRENT_USER\Software\Microsoft\Terminal Server Client\Default".
5. On the right hand side of the program, they are entries of all connection Remote Desktop Connection remembered. In order to remove an entry, just select which connection you want to delete using right click at its name then select delete command. It will automatically remove (no need to save again).

Reference: http://support.microsoft.com/kb/312169

AutoResetEvent to synchronize threads

Sometimes when we are dealing with multithreading application, we need to lock some threads and waiting for another thread finished execution, in order to do that it needs some lock mechanism to lock other threads . So, in this post we have a solution that we can use AutoResetEvent class to block threads from execution. AutoResetEvent is a class to control lock mechanism and guarantee that after it is set, it will allow only one thread to continue, then reset automatically (become lock again). There is also another class named ManualResetEvent, which it concept is similar to AutoResetEvent class, however, the difference is we need to reset the lock mechanism manually. So, it means that it will allows threads at the same time to continue until we tell it to stop (reset it). By the way, in this post I would like to talk about AutoResetEvent class only. The usage scenario for this class is easy to follow as described in the following website:

References:

• http://msdn.microsoft.com/en-us/library/system.threading.autoresetevent.autoresetevent.aspx
• What is the difference between ManualResetEvent and AutoResetEvent in .NET?

Task the new way to parallel jobs, a replacement for BackgroundWorker

Task class is an improvement version for BackgroundWorker. It supports nesting (parent/child tasks), new cacellation API, task continuations, etc. The following website is an example to compare Task and BackgroundWorker.

References: 

• Reporting Progress from Tasks
• Task parallel library replacement for BackgroundWorker?
• Continuation Tasks
• Parallel Programming: Task Schedulers and Synchronization Context

Image POST Client and Sever in Python and C#

From last time, I had told how to encode image into base64 string[1], and how to do POST message to HTTP server[2][3] This post will continue from those posts. First, we will create HTTP POST server in Python. I based on the concept that a message will be encoded using url-encode format in a form of base64 string, and the image string will be sent to a variable named "img". It will decode an image string from that variable.

import SimpleHTTPServer
import SocketServer
import cgi
from base64 import decodestring

PORT = 8000

class ServerHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):

 def _writeheaders(self):
  self.send_response(200)
  self.send_header('Content-type', 'text/html')
  self.end_headers()

 def do_GET(self):
  filename = 'temp.png'
  f = open(filename, 'rb')
  encode = f.read().encode('base64')
  img = '<img height="200" src="data:image/png;base64,' + encode + '" width="250" />'
  self._writeheaders()
  self.wfile.write("""
  <html><head><title>Simple Server</title></head>
   <body>
    It worked!!!!
 
    %s
   </body>
  </html>"""  % (img))
 def do_POST(self):
  form = cgi.FieldStorage(
   fp=self.rfile,
   headers=self.headers,
   environ={'REQUEST_METHOD':'POST',
      'CONTENT_TYPE':self.headers['Content-Type'],
     })
  encode = form['img'].value
  decode = decodestring(encode)
  output = open('temp.png', 'wb')
  output.write(decode)
  output.close()
  # After posting image has done, it will response GET message to show that image
  self.do_GET()

Handler = ServerHandler

httpd = SocketServer.TCPServer(("", PORT), Handler)

print "serving at port", PORT
httpd.serve_forever()

Then, we will create HTTP POST client to upload an image to our HTTP POST server.

Python:

import urllib, urllib2

uri = 'http://localhost:8000'
filename = 'Leafa.jpg'
f = open(filename, 'rb')
encode = f.read().encode('base64')
params = { 'img' : encode }
data = urllib.urlencode(params)

p = urllib2.urlopen(uri, data)
print p.read()

C# WPF:

string fileName = "Leafa.jpg";
StreamResourceInfo sri = null;
Uri uri = new Uri(fileName, UriKind.Relative);
sri = Application.GetResourceStream(uri);

using (var memoryStream = new MemoryStream())
{
    sri.Stream.CopyTo(memoryStream);
    byte[] result = memoryStream.ToArray();
    var base64 = "img=" + HttpUtility.UrlEncode(System.Convert.ToBase64String(result));

    MessageBox.Show(base64);

    using (var wc = new WebClient())
    {
        wc.Headers["Content-Type"] = "application/x-www-form-urlencoded";
        wc.UploadStringCompleted += wc_UploadStringCompleted;
        wc.UploadStringAsync(new Uri(url), "POST", base64);
    }
}

The server will response a web page, which the client will show that response as a text format, so, if you want to make sure that your image are already uploaded, just check it the "server.py" directory. You will see the image named "temp.png", which is converted from jpg image in the client side. Moreover, you can use a web browser request to http://localhost:8000 to let GET response show you that uploaded one.

The sample project is uploaded, can download from http://www.mediafire.com/?1okv3lc6nk1jsc7.

Leafa.jpg

References:

1. Encode an Image into base64 string in C# / Python
2. Simple HTTP POST Server / Client with Python
3. HTTP POST data via WebClient and WebRequest

STA and MTA

This post is written because when I wrote the multithreads application, mostly in UI contained apps, it will ask for using STA in some methods. Then, I really curious what it is and find out why need to use STA, and how about MTA. In short, STA and MTA indicates where the thread resources will be located. If some objects need like COM objects, they are not thread safe which don't handle thread synchronization, commonly used in UI compoment. To call COM objects in other threads, they need to marshal message to the STA thread using message pumping system.

References:

• http://stackoverflow.com/questions/127188/could-you-explain-sta-and-mta
• http://bytes.com/topic/c-sharp/answers/260741-difference-between-sta-mta
• http://en.wikipedia.org/wiki/Component_Object_Model
• http://en.wikipedia.org/wiki/Object_Linking_and_Embedding
• http://en.wikipedia.org/wiki/Marshalling_(computer_science)

Distributed Caching in ASP.NET

The following links provide the concept of doing distributed caching and also their benefits:

• How to Handle Relational Data in a Distributed Cache
• Distributed Caching On The Path To Scalability

Windows Azure Errors Guide

If you face provisioning timed out during restore virtual machine from image file: Azure (IaaS) Provisioning Timed Out.

If you face the provisioning operation is too long, look at "The operation cannot be performed because the virtual machine is faulted."

P.S. If I find anymore unexpected errors, I will update to this post.

Useful Links for XNA Novice Startup

This link will guide from the loading resource files to animating multiple sprite objects: http://www.xnadevelopment.com/tutorials.shtml

This link will give a set of sample walkthrough projects to let us follow: http://www.riemers.net/

Double NAT - How to solve it?

Before I going to explain how to solve double NAT problem, I will introduce what is NAT first. Due to the number of IP addresses on internet is limited, NAT (Network Address Translation) was introduced. A router will use only one public IP address (Gateway), however, a network behind NAT is using private IP addresses, which is valid within the router network. To be able to access a network within NAT, port forwarding is required in order to bypass the public IP address with a specific port to a specific private IP address with specific port as well. This scenario represents a single level of NAT, having only one router cover all the entire network. But it often isn't simple like this.

Double NAT is a scenario where multiple routers on network do network address translation. The most common sample is a Cable or DSL modem is connected to a Wi-Fi router. NAT of both modem and router are enabled. Then, computers on the network are connected to the Wi-Fi router. In this scenario, even if port forwarding is setup on the Wi-Fi router, the computer will not be accessible from internet because the Wi-Fi doesn't have a public IP address. It has only a private IP address, which is given from the Cable/DSL modem. There are many solutions to solve this problem, however, there is no silver bullet. It depends on situation which one is suitable.

Possible Solutions: 

1. Setup PPPoE connection between the wireless router and modem 

This is the most robust solution, unfortunately not all ISPs provide enough information for this to be setup easily 

PPPoE can be usually setup in the wireless router's WAN settings. There are usually multiple options to configure the WAN connection of wireless router, amongst which are DHCP and PPPoE. DHCP is no good here, as it results in private IP address assigned to the WiFi router. PPPoE is better, because it bypasses the NAT in the modem, however it might need login and password information which the ISP might not provide.

2. Put the wireless router in bridged mode 

Bridged mode on wireless router means that NAT and DHCP functions on it will be disabled. Some router call it bridged mode, some simply allow you to disable NAT and DHCP. Unfortunately some WiFi routers simply don't support bridged mode at all. 

If you manage to switch router to bridged mode, all port forwarding needs to be configured on the modem (either automatically if it supports NAT-PMP, or manually).

3. Put the wireless router in modem's DMZ 

DMZ (demilitarized zone) is a common feature of router that allow to chose one client to which all traffic is forwarded. If your modem supports DMZ, this might be solution for you: 

1. Find out the WAN address of wireless router. For this you might need to log in to the WiFi router admin interface and look at the Status page (most router's have status pages which show relevant information about the WAN connection). 

2. Log in to the modem web administration interface, find the DMZ settings and put the WiFi router's IP WAN address there. 

Note that with this solution you will still get a double NAT warning in Air Video Server, but if the port forwarding on Wireless router is setup correctly, things should work.

4. Forward the port 45631/TCP in the modem to the router

This solution is similar to [3], except that instead of putting the WiFi router to modem's DMZ only one port is forwarded. 

1. Find out the WAN address of wireless router. For this you might need to log in to the WiFi router admin interface and look at the Status page (most router's have status pages which show relevant information about the WAN connection). 

2. Login in the modem web admin interface and configure port forwarding of port 45631 (protocol TCP) to the address from router's status page.

Note that with this solution you will still get a double NAT warning in Air Video Server.

From mentioned solutions, for me, I prefer to use the first two solutions because they are easy to setup, just setting either a DSL/Cable modem or Wi-Fi router to a bridged mode. The  two nested networks will become one. It is different only in setting DSL/Cable modem or router to a bridged mode is needed to use a Wi-Fi router connecting to ISP using PPPoE with username and password, but setting a Wi-Fi router to a bridged mode, the DSL/Cable modem or router must be able to set port forwarding, which in some routers there is only one direction from in to out, doesn't allow outside network coming in.

Reference: http://inmethod.com/forum/posts/list/908.page -> This thread helps me so much, thanks to him.

Encode an Image into base64 string in C# / Python

From previous post is about display an embed string image into HTML. So, this post is about how to get base64 string image both Python and C#.

I will start from Python which we can convert into base64 string easily using encode function.

filename = 'xxx.jpg'
f = open(filename, 'rb')
encode = f.read().encode('base64')
print encode

If you want to decode it back into original string and write it into an image file, we can do as follows:

from base64 import decodestring

decode = decodestring(encode)
print decode

output = open('temp.png', 'wb')
output.write(decode)
output.close()

From the example, the result is it will convert a jpeg image into a png image. Use "decodestring" function that imported from "base64" module.

In C# (WPF, SL, WP), we can convert it by getting resource stream then copy to memory stream array, and convert it into base64 string.

public void Convert()
{
     string filename = "xxx.jpg";
     StreamResourceInfo sri = null;
     Uri uri = new Uri(fileName, UriKind.Relative);
     sri = Application.GetResourceStream(uri);

     using (var memoryStream = new MemoryStream())
     {
          sri.Stream.CopyTo(memoryStream);
          byte[] result = memoryStream.ToArray();
          string base64 = System.Convert.ToBase64String(result);
     }
}

For both Python and C# from my code, if you want to send the data upload to the web server using HTTP POST method, you need to do another step by encoding into the same form format in the sever side such as url-encode. You can take a look in my old posts to send data using HTTP POST for Python and C#.

References:

• Simple HTTP POST Server / Client with Python
• HTTP POST data via WebClient and WebRequest
• Embedding string base64 image into HTML
• How to create an image from a string in Python
• Encoding an image file with base64 in Python
• Python: Convert string in base64 to image and save on filesystem

Embedding string base64 image into HTML

Sometimes when we have to deal with dynamic images in web application, we can't just use the link refer to any image because we just want to generate it for temporary purpose. In order to solve this problem, HTML is be able to read an image data in form of base64 string then show an image in the browser.

It's a simple to express an image in string format using the following template:

<img src="data:image/[format];base64,[base64 image string]"/>

Example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..."/>

In the next post, I will write about how to get base64 string from an image.

Reference: Embedding Base64 Image Data into a Webpage

Happy New Year 2013 :)

Happy New Year 2013, this is the 3rd anniversary of this blog. I will try to write more useful posts, and more specific topics, not just beginner topics ^^. Finally, wishes you all happy and healthy all the year and enjoy life :)