wPaint在线绘图插件

一、总结

一句话总结：

 

1、搜画图插件的时候关键词应该搜什么？

jquery画图插件

js画图插件

jquery绘图插件

这些

 

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

 

wPaint 网址: http://wpaint.websanova.com/#websanova

 

 

 

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

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

 

一个实现的demo(JAVA).

 

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

 

<div id="wPaint"></div>

最好对容器设置样式.

 

 

1.   #wPaint {
2.   position: relative;
3.   width: 680px;
4.   height: 600px;
5.   background: #CACACA;
6.   border: solid black 1px;
7.   margin-bottom: 10px;
8.   margin-top: 10px;
9.   margin-left: 5px;
10.   float: left;
11.   }

引入JS,CSS.

 

1.   <!-- wColorPicker -->
2.   <link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/inc/wColorPicker.css"/>
3.   <script type="text/javascript" src="/js/jquery/wPaint/inc/wColorPicker.js"></script>
4.    
5.   <!-- wPaint -->
6.   <link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/wPaint.css"/>
7.   <script type="text/javascript" src="/js/jquery/wPaint/wPaint.js"></script>

 

2. 初始化wPaint.JS代码

 

 

1.   $('#wPaint').wPaint({
2.   fillStyle: "#ffffff",
3.   image:"${dataDto.base64Image}",
4.   strokeStyle: "#333333"
5.   });

黑色部分

${dataDto.base64Image}

是绘图容器的背景图片数据(png格式), base64格式的图片数据.

 

 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABY...

 

如果不需要背景,则不需要设置.

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

 

1.   public static String imageToBase64(byte[] imageBytes) {
2.   BASE64Encoder encoder = new BASE64Encoder();
3.   return encoder.encode(imageBytes);
4.   }

3. 在绘制图片完成后, 需要保存绘制的图片.

 

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

 

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

3.2 在JAVA后台可使用BASE64Decoder 类将base64数据转化为byte数组.

 

 

1.   public static byte[] base64ToBytes(String bast64Str) {
2.   BASE64Decoder decoder = new BASE64Decoder();
3.   try {
4.   byte[] bytes = decoder.decodeBuffer(bast64Str);
5.   //调整异常数据
6.   for (int i = 0; i < bytes.length; ++i) {
7.   if (bytes[i] < 0) {
8.   bytes[i] += 256;
9.   }
10.   }
11.   return bytes;
12.   } catch (IOException e) {
13.   throw new IllegalStateException("Convert base64 data error", e);
14.   }
15.   }

OK. 至此结束.