Copying an image from csXImage into an img tag using base64
The csXImage control can display an image in the Internet Explorer web browser, but sometimes it is preferrable to use the csXImage control for processing an image but to display the image in an HTML img tag. The following code example shows how the csXImage control can be given a zero size so that it is invisible and then pass the image from this control to an image tag.
The .ocx control and the licence package file are called using the following code. The object tag for the licence package file must always appear before the object tag for the .ocx control. The two files specified must be in the same folder as the web page, or the paths must be changed to suit
Code for the trial version of csXImage:
<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
<param name="LPKPath" value="csximagetrial.lpk">
</object>
<object id="csxi" classid="CLSID:D7EC6EC3-1CDF-11D7-8344-00C1261173F0"
codebase="csximagetrial.ocx" width="0" height="0"></object>
Code for the full version of csXImage:
<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
<param name="LPKPath" value="csximage.lpk">
</object>
<object id="csxi" classid="CLSID:62E57FC5-1CCD-11D7-8344-00C1261173F0"
codebase="csximage.cab" width="0" height="0"></object>
In the body of the page we will add a button and an image tag.
<p><input type="button" value="Click Here" onclick="btnClick();" /></p>
<p><img id="img" src="" /></p>
Clicking the button calls the following Javascript function:
function btnClick() {
csxi.BrushColor = 0x0000FF;
csxi.NewImage(20, 20);
document.getElementById("img").setAttribute("src", "data:image/png;base64, " + csxi.WriteBase64(4));
}
The Javascript function creates a small red square in csXImage and then copies this into the img tag. This is done by setting the src attribute to contain the base64 encoded string of the image in PNG format. WriteBase64 exports the image as a base64 encoded string and the parameter specifies the graphics format. "4" is used for a PNG image.