本人第一次发博客,用意在于记录自己在开发过程中用到的实用工具并分享出来,写的可能不好,请大家多多包涵!!!

工具官网: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 onLoad()
{
zwibbler.load("zwibbler3", saved);
}
function qingKong()
{
zwibbler.newDocument();
}
$("#xiangpi").click(function () {
zwibbler.useBrushTool("erase", 20);
});
</script>

Zwibbler—前端Canvas绘图工具使用记录的更多相关文章

  1. canvas绘图工具

    关于canvas绘图,在html页面上太方便了.当然刚开始还是入了不少坑,用了比如jcanvascript等三方插件.真实效果反而不理想,后来就没用插件. 下面是实现效果,可以在线绘制工地图然后传给后 ...

  2. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  3. HTML5 canvas 在线画笔绘图工具(二)

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  4. HTML5 canvas 在线画笔绘图工具(一)

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  5. HTML5 canvas 在线画笔绘图工具(三)

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  6. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  7. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  8. 一起来画画!8款最佳HTML5绘图工具

    HTML5无疑是当前最受宠的一项技术,今天推荐8款HTML5绘图工具,同样惊艳你的眼球!这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Javascript.对每一个web设计者来 ...

  9. Web前端错题模糊题记录

    title: Web前端错题模糊题记录 toc: true date: 2018-09-20 10:04:36 categories: Web tags: HTML CSS JavaScript HT ...

随机推荐

  1. 最新版的Dubbo Admin 3.0 本地启动方式

    项目下载 项目地址:https://github.com/apache/dubbo-admin 如下图,使用git地址直接构建或者下载zip包构建源码都可以,我用的是下载的zip包, 项目架构说明 d ...

  2. 基于myscript.js的web手写板(支持中文识别)

    网上的手写板模板不少,但是支持中文识别的却不多,而且基本上都收费的,毕竟别人的中文库凭什么免费提供给你(说好的开源呢?说好的开源呢? ←_←) 好了,进入主题,myscript.js,在官网其实我并没 ...

  3. Springboot整合kaptcha验证码

    01.通过配置类来配置kaptcha 01-01.添加kaptcha的依赖: <!-- kaptcha验证码 --> <dependency> <groupId>c ...

  4. python为什么是高级语言和解释型编程语言?它是如何粘合其它语言写的代码的?

    学习python之初,不知道大家对于python有没有疑惑,应当是有的.这里我整理出来了自己的一些疑惑,供大家参考. 为什么python是高级程序设计语言 ​ Java,C,C++这些语言是高级语言, ...

  5. Java笔记——选择语

    Java笔记--选择语句     1. if语句 规律: 1. 首先计算表达式的值. 2. 若表达式为真,则执行对应语句,为假则不执行.   第一种: if(表达式) 语句;//多个语句可用{} 例如 ...

  6. 【C# 线程】线程局部存储(TLS) 实战部分 ThreadStatic|LocalDataStoreSlot|ThreadLocal<T>

    往袋子里面装苹果 错误案例示范 关于C#多线程的文章,大部分都在讨论线程的起停或者是多线程同步问题.多线程同步就是在不同线程中访问同一个变量(一般是线程工作函数外部的变量),众所周知在不使用线程同步的 ...

  7. mysql设置定时任务-渐入佳境

    --作者:飞翔的小胖猪 --创建时间:2021年2月26日 前言 mysql中设置定时任务,需要先打开调度才能实现自动执行任务.调度功能开启后过再配合存储过程或事件等组件实现特定或定时的任务实现. 步 ...

  8. jq给手机号加密

    效果: HTML代码:     <!-- 1手机绑定 -->     <div class="memberuser_box">         <di ...

  9. Python:在cmd中使用pip安装第三方库时出现SyntaxError

    原因:pip安装库时不需要进入Python环境,在Python环境下安装就会出现SyntaxError 解决方法:输入exit(),退出Python环境,然后就可以pip安装了

  10. 二、python数据类型详解

    基本概念 迭代(iteration):如果给定一个list或tuple,我们可以通过for循环来遍历,这种遍历我们称为迭代(iteration) 可变:value改变,id不变,可变类型是不可hash ...