wPaint在線繪圖插件/在線繪圖插件/照片上面繪制標記/照片上畫圖

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. 至此結束.