-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (123 loc) · 4.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="wPaint/lib/jquery.1.10.2.min.js"></script>
<!-- jQuery UI -->
<!-- wColorPicker -->
<link rel="Stylesheet" type="text/css" href="wPaint/lib/wColorPicker.min.css" />
<link rel="Stylesheet" type="text/css" href="wPaint/wPaint.min.css" />
<style>
body {
background: #ccc;
}
.wPaint {
display: inline-block;
height: calc(100vh - 60px);
width: 700px;
position: relative;
left: 50%; transform: translate(-50%);
}
</style>
</head>
<body>
<div id="wPaint" class="wPaint"></div>
<hr>
<img src="" alt="" id="canvasImage">
<script type="text/javascript" src="wPaint/lib/jquery.ui.core.1.10.3.min.js"></script>
<script type="text/javascript" src="wPaint/lib/jquery.ui.widget.1.10.3.min.js"></script>
<script type="text/javascript" src="wPaint/lib/jquery.ui.mouse.1.10.3.min.js"></script>
<script type="text/javascript" src="wPaint/lib/jquery.ui.draggable.1.10.3.min.js"></script>
<script type="text/javascript" src="wPaint/lib/wColorPicker.min.js"></script>
<script type="text/javascript" src="wPaint/wPaint.min.js"></script>
<script type="text/javascript" src="wPaint/plugins/main/wPaint.menu.main.min.js"></script>
<script type="text/javascript" src="wPaint/plugins/text/wPaint.menu.text.min.js"></script>
<script type="text/javascript" src="wPaint/plugins/shapes/wPaint.menu.main.shapes.min.js"></script>
<script type="text/javascript" src="wPaint/plugins/file/wPaint.menu.main.file.min.js"></script>
<script>
var images = [
'images/Breast and Lymph Nodes.jpg',
'images/Female Abdomen.jpg',
'images/Female Breast (Anterior).jpg',
'images/Female Breast (Lateral).jpg',
'images/Female Reproductive System (Anterior).jpg',
'images/Female Reproductive System (Lateral).jpg',
'images/Fetal Presentation_Breech.jpg',
'images/Fetal Presentation_Cephalic.jpg',
'images/Fetal Presentation_Transver lie.jpg'
];
var painter = $('#wPaint').wPaint({
path: 'wPaint/',
width: 500,
theme: 'standard classic',
//menuOrientation: 'vertical',
bg: "#fff",
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg,
cursor: 'rocket',
// image: './wPaint/20180704155346.jpg',
crossOrigin: 'anonymous',
pencil: 'url("/plugins/main/img/cursor-pencil.png")',
mode: 'pencil',
fillStyle: '#FFF',
strokeStyle: 'black'
});
// var a = new Image();
// a.src = images[0];
// a.width = '100%';
// a.height = '100%';
// a.setAttribute("crossOrigin",'Anonymous');
// var canvas = $("#wPaint .wPaint-canvas")[0];
// var ctx = canvas.getContext("2d"); //对应的CanvasRenderingContext2D对象(画笔)
// a.onload = function() {//图片加载完，再draw 和 toDataURL
// ctx.drawImage(a, 0, 0);
// }
// $("#wPaint").wPaint("image", 'images/Fetal Presentation_Cephalic.jpg');
function saveImg(image) {
var _this = this;
var imageData = $("#wPaint").wPaint("image");
$("#canvasImage").attr('src', imageData);
$("#canvasImageData").val(imageData);
var img = image.replace(/\+/g, '%2B');
$.ajax({
type: 'POST',
url: 'http://192.168.2.50:8080/EmrApplication/drugImage/img',
data: {base64Data: image},
// processData: false,
// contentType: false,
header: {
"Content-type": "text/html;charset=UTF-8"
},
success: function (resp) {
// internal function for displaying status messages in the canvas
_this._displayStatus('Image saved successfully');
// doesn't have to be json, can be anything
// returned from server after upload as long
// as it contains the path to the image url
// or a base64 encoded png, either will work
resp = $.parseJSON(resp);
// update images array / object or whatever
// is being used to keep track of the images
// can store path or base64 here (but path is better since it's much smaller)
images.push(resp.img);
// do something with the image
$('#wPaint-img').attr('src', image);
}
});
}
function loadImgBg () {
// internal function for displaying background images modal
// where images is an array of images (base64 or url path)
// NOTE: that if you can't see the bg image changing it's probably
// becasue the foregroud image is not transparent.
this._showFileModal('bg', images);
}
function loadImgFg () {
// internal function for displaying foreground images modal
// where images is an array of images (base64 or url path)
this._showFileModal('fg', images);
}
</script>
</body>
</html>