脚本宝典收集整理的这篇文章主要介绍了html5教程-在线绘图插件--wPaint 的实际应用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 

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

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

 

一个实现的demo(JAVA).

 

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

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

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

[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]
<!-- 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/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/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.  至此结束.

 

 
 

 

 

 

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-在线绘图插件--wPaint 的实际应用全部内容，希望文章能够帮你解决html5教程-在线绘图插件--wPaint 的实际应用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。