Skip to content

Commit 18e66d7

Browse files
committed
update readme
1 parent 2294aa2 commit 18e66d7

File tree

2 files changed

+51
-4
lines changed

2 files changed

+51
-4
lines changed

Guidance.md

+50-4
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,12 @@ designer.destroy();
5959
designer.getView();
6060
```
6161

62-
6362
### `drawBackgroupWithImage`
6463
Draw a image on a canvas as background.
6564

66-
draw `DataUrl` :
65+
1、draw `DataUrl` :
66+
67+
recommended to replace by`#4`(`draw image-path`)
6768
```javascript
6869
var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIr
6970
GAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn
@@ -72,20 +73,27 @@ EgqPcT12VgAAAABJRU5ErkJggg=="
7273
designer.drawBackgroupWithImage(dataurl);
7374
```
7475

75-
draw `Image` :
76+
2、draw `Image` :
7677
```javascript
7778
var image=new Image()
7879
image.src="imagePath";
7980
designer.drawBackgroupWithImage(image);
8081
```
8182

82-
draw `File` :
83+
3、draw `File` :
8384
```javascript
8485
var file=new File()
8586
// do something
8687
designer.drawBackgroupWithImage(file);
8788
```
8889

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+
8997
### `toDataUrl`
9098
Get data-URL of your drawings!
9199

@@ -109,6 +117,41 @@ $("#download-png").click(function () {
109117
});
110118
```
111119

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+
112155
### `iframe`
113156
You can access designer iframe as following:
114157

@@ -134,6 +177,7 @@ The configuration of the entire project.
134177
var designer=CrysyanDesigner({
135178
ifrName:"",
136179
projectPath:"",
180+
isRecord:false,
137181
canvas: {
138182
// px
139183
width: 900,
@@ -163,6 +207,8 @@ You do not need to set this value if it is not necessary.
163207
Normally, the default value is OK
164208
### `projectPath`
165209
Path of crysyan project.
210+
### `isRecord`
211+
Whether to open the recording feature.Default:`false`.
166212
### `canvas`
167213
* `width`
168214

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ $("#download-png").click(function () {
235235

236236
### `getCanvasRecorder`
237237
Get `RecordRTC` of your drawings,which used to record canvas to video(video/webm).Does not supported in IE browser.
238+
First,you should set `isRecord=true` if you want to record.
238239

239240
API of RecordRTC,see:[RecordRTC API Reference](http://recordrtc.org/RecordRTC.html)
240241

0 commit comments

Comments
 (0)