Online drawing plug-in -- practical application of wPaint

 

In practical application, this is a good jQuery plug-in for online real-time drawing.

One of the most important functions is to save painted images.

 

An implemented demo (JAVA ).

 

1. Define a wPaint container on the HTML page.

[Html]
<Div id = "wPaint"> </div>

<Div id = "wPaint"> </div> it is best to set a style for the container.

[Html]
# WPaint {
Position: relative;
Width: 680px;
Height: 600px;
Background: # CACACA;
Border: solid black 1px;
Margin-bottom: 10px;
Margin-top: 10px;
Margin-left: 5px;
Float: left;
}

# WPaint {
Position: relative;
Width: 680px;
Height: 600px;
Background: # CACACA;
Border: solid black 1px;
Margin-bottom: 10px;
Margin-top: 10px;
Margin-left: 5px;
Float: left;
} Introduce JS and CSS.

[Html]
<! -- WColorPicker -->
<Link rel = "Stylesheet" type = "text/css" href = "/js/jquery/wPaint/inc/wColorPicker.css"/>
<Script type = "text/javascript" src = "/js/jquery/wPaint/inc/wColorPicker. js"> </script>
 
<! -- WPaint -->
<Link rel = "Stylesheet" type = "text/css" href = "/js/jquery/wPaint/wPaint.css"/>
<Script type = "text/javascript" src = "/js/jquery/wPaint. js"> </script>

<! -- WColorPicker -->
<Link rel = "Stylesheet" type = "text/css" href = "/js/jquery/wPaint/inc/wColorPicker.css"/>
<Script type = "text/javascript" src = "/js/jquery/wPaint/inc/wColorPicker. js"> </script>

<! -- WPaint -->
<Link rel = "Stylesheet" type = "text/css" href = "/js/jquery/wPaint/wPaint.css"/>
<Script type = "text/javascript" src = "/js/jquery/wPaint. js"> </script>

 

2. initialize wPaint. JS Code

[Html]
$ ('# WPaint'). wPaint ({
FillStyle: "# ffffff ",
Image: "<STRONG >$ {dataDto. base64Image} </STRONG> ",
StrokeStyle: "#333333"
});

$ ('# WPaint'). wPaint ({
FillStyle: "# ffffff ",
Image: "$ {dataDto. base64Image }",
StrokeStyle: "#333333"
}); Black part [html] view plaincopyprint?
$ {DataDto. base64Image}

$ {DataDto. base64Image} is the background image data of the drawing container (in png format) and base64 format.

[Html]
Data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABY...

Data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABY...
If you do not need a background, you do not need to set it.

In JAVA, we can use the BASE64Encoder class for conversion.

[Html]
Public static String imageToBase64 (byte [] imageBytes ){
BASE64Encoder encoder = new BASE64Encoder ();
Return encoder. encode (imageBytes );
}

Public static String imageToBase64 (byte [] imageBytes ){
BASE64Encoder encoder = new BASE64Encoder ();
Return encoder. encode (imageBytes );
}
3. After creating an image, you need to save it.

3.1 obtain the image attribute value of wPaint to obtain the image data in base64 format.

 
Var imageData = $ ("# wPaint"). wPaint ("image ");

Var imageData = $ ("# wPaint"). wPaint ("image ");
3.2 In the JAVA background, you can use the BASE64Decoder class to convert base64 data into byte arrays.

[Html]
Public static byte [] base64ToBytes (String bast64Str ){
BASE64Decoder decoder = new BASE64Decoder ();
Try {
Byte [] bytes = decoder. decodeBuffer (bast64Str );
// Adjust abnormal data
For (int I = 0; I <bytes. length; ++ I ){
If (bytes [I] <0 ){
Bytes [I] + = 256;
}
}
Return bytes;
} Catch (IOException e ){
Throw new IllegalStateException ("Convert base64 data error", e );
}
}

Public static byte [] base64ToBytes (String bast64Str ){
BASE64Decoder decoder = new BASE64Decoder ();
Try {
Byte [] bytes = decoder. decodeBuffer (bast64Str );
// Adjust abnormal data
For (int I = 0; I <bytes. length; ++ I ){
If (bytes [I] <0 ){
Bytes [I] + = 256;
}
}
Return bytes;
} Catch (IOException e ){
Throw new IllegalStateException ("Convert base64 data error", e );
}
}
OK. Now it is finished.