@@ -59,11 +59,12 @@ designer.destroy();
59
59
designer .getView ();
60
60
```
61
61
62
-
63
62
### ` drawBackgroupWithImage `
64
63
Draw a image on a canvas as background.
65
64
66
- draw ` DataUrl ` :
65
+ 1、draw ` DataUrl ` :
66
+
67
+ recommended to replace by` #4 ` (` draw image-path ` )
67
68
``` javascript
68
69
var dataurl = " data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIr
69
70
GAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn
@@ -72,20 +73,27 @@ EgqPcT12VgAAAABJRU5ErkJggg=="
72
73
designer .drawBackgroupWithImage (dataurl);
73
74
```
74
75
75
- draw ` Image ` :
76
+ 2、 draw ` Image ` :
76
77
``` javascript
77
78
var image= new Image ()
78
79
image .src = " imagePath" ;
79
80
designer .drawBackgroupWithImage (image);
80
81
```
81
82
82
- draw ` File ` :
83
+ 3、 draw ` File ` :
83
84
``` javascript
84
85
var file= new File ()
85
86
// do something
86
87
designer .drawBackgroupWithImage (file);
87
88
```
88
89
90
+ 4、draw ` image-path ` :
91
+
92
+ Usually, you need to add "../../" in front of the relative directory to roll back to the root directory where the 'crysyan' project is located
93
+ ``` javascript
94
+ designer .drawBackgroupWithImage (" ../../img/a.png" );
95
+ ```
96
+
89
97
### ` toDataUrl `
90
98
Get data-URL of your drawings!
91
99
@@ -109,6 +117,41 @@ $("#download-png").click(function () {
109
117
});
110
118
```
111
119
120
+ ### ` getCanvasRecorder `
121
+ Get ` RecordRTC ` of your drawings,which used to record canvas to video(video/webm).Does not supported in IE browser.
122
+
123
+ API of RecordRTC,see:[ RecordRTC API Reference] ( http://recordrtc.org/RecordRTC.html )
124
+
125
+ ` example: `
126
+
127
+ ` html ` :
128
+ ``` html
129
+ <button type =" button" id =" start-record" >start-record</button >
130
+ <button id =" stop-record" >stop-record</button >
131
+ <div id =" videoTag" style =" width :1000px ; height :500px ;" >ddd</div >
132
+ ```
133
+ ` javascript `
134
+ ``` javascript
135
+ var recorder = designer .getCanvasRecorder ();
136
+ $ (" #start-record" ).click (function () {
137
+ console .log (" recording" );
138
+ recorder .initRecorder ();
139
+ recorder .startRecording ();
140
+ });
141
+ $ (" #stop-record" ).click (function () {
142
+ console .log (" stop" );
143
+ recorder .stopRecording (function () {
144
+ var blob = recorder .getBlob ();
145
+ var video = document .createElement (' video' );
146
+ video .src = URL .createObjectURL (blob);
147
+ video .setAttribute (' style' , ' height: 100%; position: absolute; top:0; left:0;z-index:9999;width:100%;' );
148
+ document .body .appendChild (video);
149
+ video .controls = true ;
150
+ video .play ();
151
+ });
152
+ });
153
+ ```
154
+
112
155
### ` iframe `
113
156
You can access designer iframe as following:
114
157
@@ -134,6 +177,7 @@ The configuration of the entire project.
134
177
var designer= CrysyanDesigner ({
135
178
ifrName: " " ,
136
179
projectPath: " " ,
180
+ isRecord: false ,
137
181
canvas: {
138
182
// px
139
183
width: 900 ,
@@ -163,6 +207,8 @@ You do not need to set this value if it is not necessary.
163
207
Normally, the default value is OK
164
208
### ` projectPath `
165
209
Path of crysyan project.
210
+ ### ` isRecord `
211
+ Whether to open the recording feature.Default:` false ` .
166
212
### ` canvas `
167
213
* ` width `
168
214
0 commit comments