首页前端开发HTML在线绘图插件--wPaint 的实际应用

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

时间2024-01-25 11:06:25发布访客分类HTML浏览970
导读：收集整理的这篇文章主要介绍了html5教程-在线绘图插件--wPaint 的实际应用，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 在实际应...
收集整理的这篇文章主要介绍了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.  至此结束.

 

 
 

 

 

 

 


 

 


在实际应用中, 这是一个不错的在线实时绘图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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

CSSdivHTMLjQuerypost-format-galleryState数组

若转载请注明出处： 在线绘图插件--wPaint 的实际应用
本文地址： https://pptw.com/jishu/586448.html
HTML5画布画图实例 15. 如何在XPages中提示操作成功

游客 回复需填写必要信息
↑