Zwibbler—前端Canvas繪圖工具使用記錄

本人第一次發博客，用意在于記錄自己在開發程序中用到的實用工具并分享出來，寫的可能不好，請大家多多包涵！！！

工具官網：https://www.zwibbler.com

基于Canvas的一個前端繪畫工具，具體功能本人暫未深究，主要在專案中的應用場景如下：

1.將Canvas畫板植入前端

2.用戶可通過左側的畫筆選項工具選擇畫筆在畫板上繪圖

3.繪圖完成后點擊頁面中的提交按鈕可將繪制后的畫板以jpg格式提交到服務器中

 廢話不多說，在此簡述一下如何實作上述幾點：

引入Zwibbler的JS檔案，我個人引入的是官網的zwibbler-demo.js

首先，將Canvas畫板植入前端

         1.頁面寫一個div

<div id="zwibbler" style="margin-left:auto;margin-right:auto;border:2px solid red;width:1000px;height:800px;"></div>

         2.引入zwibbler-demo.js到專案中，并在script腳本中初始化Zwibbler

<script src="~/css/Zwibbler/zwibbler.js"></script>
<script type="text/javascript">
        var zwibbler = Zwibbler.create("#zwibbler", {
            defaultBrushWidth: 5,//默認畫筆寬度（以像素為單位）
            showCopyPaste: false,//確定是否在內置工具列上顯示復制/粘貼按鈕
            showArrowTool: false,//確定是否在內置工具列中顯示箭頭工具
            showTextTool: false,//確定是否在內置工具列中顯示文本工具
            showShapeBrushTool: true,//確定是否在內置工具列中顯示魔術形狀畫筆工具
            showLineTool: false,//確定是否在內置工具列中顯示線條工具
        });
</script>

         內置工具列：初始化Zwibbler畫板時會在左側有一列工具列，如圖：

       至此，Zwibbler畫板植入完成

其次，用戶可通過左側的畫筆選項工具選擇畫筆在畫板上繪圖

          大家可自行測驗工具繪制樣式，（在觸摸設備也可使用）；

然后，繪圖完成后點擊頁面中的提交按鈕可將繪制后的畫板以jpg格式提交到服務器中

這個功能的話是我在官方檔案中根據檔案實作的，

          1.頁面提交按鈕：

<input id="tijiao" type="button" onclick="tiJiao()" style="background-image: url(../../css/Zwibbler/Submit.png); width: 204px; height: 85px; position: absolute; left: 1316px; top: 850px; border: 0px;" />

           onclick事件代碼：

<script>
function tiJiao()
        {
            var dataUrl = zwibbler.save("png");
            var bbt = window.prompt("請輸入您的姓名", "");
            if (bbt) {
                $.ajax({
                    type: 'post',
                    url: '/Demo/UploadImg',
                    async: true,
                    data: { 'dataURL': dataUrl, 'imgName': bbt },
                    dataType: 'json',
                    success: function (res) {
                        alert("提交完成~");
                    }
                })
            }
            else if (bbt === "") {
                alert("請輸入姓名");
            }
            else {
                alert("您取消了提交~");
            }
        }
</script>

               @*因為客戶需求，我在此處加入了prompt彈框，用戶繪畫完成點擊提交后會觸發彈框，如果不輸入姓名將不會執行ajax方法把圖片提交至服務器，*@

                zwibbler.save()為畫板匯出為圖片的方法，我這里選擇匯出為png格式的圖片，程式使用MVC框架，所以異步提交到服務器的動作方法，上傳至服務器的動作方法在此就不貼出來了，網上一搜一大堆很詳細

                Zwibbler這個繪圖工具特別強大，大家可以在官網上邊的開發人員檔案查看到此工具的更多屬性，我這里也貼一些我自己使用的其他屬性的代碼以及效果圖供大家參考，有興趣的同學可以到開發檔案查看，傳送門

    <input type="button" onclick="onSave()"  style="background-image:url(../../css/Zwibbler/timeSave.png);width:204px;height:85px;position:absolute;left:420px;top:850px;border:0px;"/>
    <input id="loadButton" type="button" onclick="onLoad()" disabled="disabled" style="background-image: url(../../css/Zwibbler/readSave.png); width: 204px; height: 85px; position: absolute; left: 644px; top: 850px; border: 0px;"/>
    <input id="qingkong" type="button" onclick="qingKong()" style="background-image: url(../../css/Zwibbler/restart.png); width: 204px; height: 85px; position: absolute; left: 868px; top: 850px; border: 0px;"/>
    <input id="xiangpi" type="button" style="background-image: url(../../css/Zwibbler/erase.png); width: 204px; height: 85px; position: absolute; left: 1092px; top: 850px; border: 0px;"/>

<script>
        var saved = null;
        function onSave()
        {
            saved = zwibbler.save("zwibbler3");
            $("#loadButton").removeAttr("disabled");
        }
        function onl oad()
        {
            zwibbler.load("zwibbler3", saved);
        }
        function qingKong()
        {
            zwibbler.newDocument();
        }
        $("#xiangpi").click(function () {
            zwibbler.useBrushTool("erase", 20);
        });
</script>

標籤：其他

上一篇：前端工程化 Webpack基礎

下一篇：中國軟體杯---電力客戶行為分析---圖表聯動echarts-demo（flask）