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

大春丶發表於2022-03-29
前端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;"/>
Zwibbler—前端Canvas繪圖工具使用記錄 
<script>
        var saved = null;
        function onSave()
        {
            saved = zwibbler.save("zwibbler3");
            $("#loadButton").removeAttr("disabled");
        }
        function onLoad()
        {
            zwibbler.load("zwibbler3", saved);
        }
        function qingKong()
        {
            zwibbler.newDocument();
        }
        $("#xiangpi").click(function () {
            zwibbler.useBrushTool("erase", 20);
        });
</script>
View Code

 

相關文章