wPaint在线绘图插件
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. 至此结束.
wPaint在线绘图插件的更多相关文章
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- jqPlot,一个 jQuery这个 JavaScript 框架的绘图插件
因为项目中需要做报表的功能,于是学习了如何使用jqplot这个绘图插件 结合ajax技术,动态交互后台数据 前前后后花了三四天的时间. 感觉它会出来的想说还可以. 我的后台模板是bootstrap,在 ...
- 【JEECG技术文档】JEECG在线聊天插件功能集成文档
原文地址:http://jeecg.iteye.com/blog/2320670 JEECG在线聊天插件功能集成文档 前提: 采用jeecg_3.6.3版本以上(Maven工程) 插件项目: 在线聊天 ...
- MyEclipse 10 下在线安装插件
昨天不知道怎么就删除了电脑中的eclipse 我x,还原不回来了. 今天就安装了最新版本的myeclipse10,大家都知道,MyEclipse 中有一个烦人的 Software and Worksp ...
- MyEclipse显示 Install new software 在线安装插件选项
转自:https://blog.csdn.net/greatpresident/article/details/8950869 昨天不知道怎么就删除了电脑中的eclipse 我x,还原不回来了. 今天 ...
- nopcommerce 3.6网银在线支付插件(源码)
网银在线支付插件,下载后通过后台插件管理安装.配置即可使用. 下载:网银在线支付插件3.1.3.6版.rar (106.3KB) 源代码放在\Plugins目录下,用vs打开重新生成. 源地址:htt ...
- 为VLC增加在线字幕插件VLSub
VLC的在在线字幕插件VLSub,官网:https://github.com/exebetche/vlsub. 原理是通过搜索全球最大的字幕网站https://www.opensubtitles.or ...
- 【eclipse插件开发实战】 Eclipse插件开发6——eclipse在线翻译插件Translator开发实例详解
Eclipse插件开发6--eclipse在线翻译插件Translator开发实例详解 在上一篇文章中讲到了一个简单的eclipse插件开发实例,主要是对插件工程的基本创建步骤进行了讲解,这篇文章当中 ...
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
随机推荐
- smarty模板引擎(一)基础知识
一.基本概念 1.什么是mvc? mvc是一种开发模式,核心思想是:数据的输入.数据的处理.数据显示的强制分离. 2.什么是smarty? smarty是一个php的模板引擎.更明白的 ...
- 78.pipe多管道云端,客户端通信
压力测试截图: 云端 定义管道缓存区大小,最多连接数量(线程个数),当前线程个数,管道名字 //缓冲区大小 #define SIZE 4096 //最多连接数量 #define MAX_CONNECT ...
- 用硬件卡克隆Linux集群
650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpic.php?refimg= ...
- Codefroces 832B Petya and Exam
B. Petya and Exam time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- 【Java学习】Font字体类的用法介绍
一.Font类简介 Font类是用于设置图形用户界面上的字体样式的,包括字体类型(例如宋体.仿宋.Times New Roman等).字体风格(例如斜体字.加粗等).以及字号大小. 二.Font类的引 ...
- http的原理
工作原理:客户机与服务器建立连接之后,发送一个请求给服务器,请求格式为统一资源标识符.协议版本号.(请求行.请求头.请求体),服务器接收请求后给予相应,包括相应行,响应头,响应体. ...
- 【例题 8-3 UVA - 1152】4 Values whose Sum is 0
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然中间相遇. 自己写了个hash处理一下冲突就可以了. [代码] /* 1.Shoud it use long long ? 2. ...
- Android 内存监测工具
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/幻影浪子 [博主导读]俗话说:工欲善其事必先利其器!我们先来了解下内存监测工具是怎么使用的?为内 ...
- [RxJS] Learn How To Use RxJS 5.5 Beta 2
The main changes is about how you import rxjs opreators from now on. And introduce lettable opreator ...
- Android实现点击通知栏后,先启动应用再打开目标Activity
情况简述 在开发Android app的过程中,遇到这样一个需求:app中启动一个Service,该Service在独立进程中运行,与服务器保持长连接,将服务器推送过来的消息在通知栏中显示,并设置点击 ...