wPaint在线绘图插件在线绘图插件照⽚上⾯绘制标记照⽚上画图wPaint在线绘图插件
⼀、总结
⼀句话总结：
1、搜画图插件的时候关键词应该搜什么？
画图插件
js画图插件
jquery绘图插件
这些
⼆、在线绘图插件--wPaint 的实际应⽤
wPaint ⽹址:
在实际应⽤中, 这是⼀个不错的在线实时绘图jQuery插件.
最重要的⼀个功能是⽀持将绘的图进⾏保存.
⼀个实现的demo(JAVA).
1. 在HTML页⾯上定义⼀个wPaint的容器.
<div id="wPaint"></div>
最好对容器设置样式.
1.
#wPaint {
2.
position: relative;
3.
width: 680px;
4.
height: 600px;
5.
background: #CACACA;
6.
border: solid black 1px;
7.
margin-bottom: 10px;
8.
margin-top: 10px;
9.
margin-left: 5px;
10.
float: left;
11.
}
引⼊JS,CSS.
1.
<!-- wColorPicker -->
2.
<link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/inc/wColorPicker.css"/> 3.
<script type="text/javascript" src="/js/jquery/wPaint/inc/wColorPicker.js"></script>
4.
5.
<!-- wPaint -->
6.
<link rel="Stylesheet" type="text/css" href="/js/jquery/wPaint/wPaint.css"/>
7.
<script type="text/javascript" src="/js/jquery/wPaint/wPaint.js"></script>
2. 初始化wPaint.JS代码
1.
$('#wPaint').wPaint({
2.
fillStyle: "#ffffff",
3.
image:"${dataDto.base64Image}",
4.
strokeStyle: "#333333"
5.
});
⿊⾊部分
${dataDto.base64Image}
是绘图容器的背景图⽚数据(png格式), base64格式的图⽚数据.
data:image/png;
jquery插件分享
如果不需要背景，则不需要设置.
在JAVA中，我们可以使⽤ BASE64Encoder类来转化.
1.
public static String imageToBase64(byte[] imageBytes) {
2.
BASE64Encoder encoder = new BASE64Encoder();
3.
de(imageBytes);
4.
}
3. 在绘制图⽚完成后, 需要保存绘制的图⽚.
3.1 获取wPaint的image属性值可获取base64格式的图⽚数据
var imageData = $("#wPaint").wPaint("image");
3.2 在JAVA后台可使⽤BASE64Decoder 类将base64数据转化为byte数组.
1.
public static byte[] base64ToBytes(String bast64Str) {
2.
BASE64Decoder decoder = new BASE64Decoder();
3.
try {
4.
byte[] bytes = decoder.decodeBuffer(bast64Str);
5.
//调整异常数据
6.
for (int i = 0; i < bytes.length; ++i) {
7.
if (bytes[i] < 0) {
8.
bytes[i] += 256;
9.
}
10.
}
11.
return bytes;
12.
} catch (IOException e) {
13.
throw new IllegalStateException("Convert base64 data error", e);
14.
}
15.
}
OK. ⾄此结束.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。