在线绘图插件--wPaint 的实际应用

在实际应用中, 这是一个不错的在线实时绘图jQuery插件.

最重要的一个功能是支持将绘的图进行保存.

一个实现的demo(JAVA).

1. 在HTML页面上定义一个wPaint的容器.

[html]
<div id="wPaint"></div>

<div id="wPaint"></div>最好对容器设置样式.

[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;
        }引入JS,CSS.

[html]

<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>


<link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/wPaint.css"/>
<script type="text/javascript" src="/js/jquery/wPaint/wPaint.js"></script>

<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>

<link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/wPaint.css"/>
    <script type="text/javascript" src="/js/jquery/wPaint/wPaint.js"></script>

2. 初始化wPaint.JS代码

[html]
$('#wPaint').wPaint({
    fillStyle: "#ffffff",
    image:"<STRONG>${dataDto.base64Image}</STRONG>",
    strokeStyle: "#333333"
});

            $('#wPaint').wPaint({
                fillStyle: "#ffffff",
                image:"${dataDto.base64Image}",
                strokeStyle: "#333333"
            });黑色部分[html] view plaincopyprint?
${dataDto.base64Image}

${dataDto.base64Image}是绘图容器的背景图片数据(png格式), base64格式的图片数据.

[html]
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABY...

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABY...
如果不需要背景,则不需要设置.

在JAVA中,我们可以使用 BASE64Encoder类来转化.

[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. 在绘制图片完成后, 需要保存绘制的图片.

3.1 获取wPaint的image属性值可获取base64格式的图片数据

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

var imageData = $("#wPaint").wPaint("image");
3.2 在JAVA后台可使用BASE64Decoder 类将base64数据转化为byte数组.

[html]
public static byte[] base64ToBytes(String bast64Str) {
    BASE64Decoder decoder = new BASE64Decoder();
    try {
        byte[] bytes = decoder.decodeBuffer(bast64Str);
        //调整异常数据
        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);
            //调整异常数据
            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. 至此结束.