wPaint線上繪圖外掛

weixin_33816946發表於2018-06-29
AI繪圖

wPaint線上繪圖外掛

一、總結

一句話總結：

 

1、搜畫圖外掛的時候關鍵詞應該搜什麼？

jquery畫圖外掛

js畫圖外掛

jquery繪圖外掛

這些

 

二、線上繪圖外掛--wPaint 的實際應用

 

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

 

 

 

在實際應用中, 這是一個不錯的線上實時繪圖jQuery外掛.

最重要的一個功能是 支援將繪的圖進行儲存.

 

一個實現的demo(JAVA).

 

1. 在HTML頁面上定義一個wPaint的容器.

 

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

最好對容器設定樣式.

 

 

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

 

    <!-- 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程式碼

 

 

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

黑色部分

${dataDto.base64Image}

是繪圖容器的背景圖片資料(png格式), base64格式的圖片資料.

 

 

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

 

如果不需要背景,則不需要設定.

在JAVA中,我們可以使用 BASE64Encoder類來轉化.

 

    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");


3.2 在JAVA後臺可使用BASE64Decoder 類將base64資料轉化為byte陣列.

 

 

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

 

 

 




 

 

 

相關文章