File tree 4 files changed +95
-3
lines changed
4 files changed +95
-3
lines changed Original file line number Diff line number Diff line change @@ -55,7 +55,8 @@ export default defineConfig({
55
55
{ text : 'moveElement' , link : '/en-US/api/move-element' } ,
56
56
{ text : 'resize' , link : '/en-US/api/resize' } ,
57
57
{ text : 'centerContent' , link : '/en-US/api/center-content' } ,
58
- { text : 'enable/disable' , link : '/en-US/api/enable-disable' }
58
+ { text : 'enable/disable' , link : '/en-US/api/enable-disable' } ,
59
+ { text : 'getImageBlobURL' , link : '/en-US/api/get-image-blob-url' }
59
60
]
60
61
}
61
62
] ,
@@ -123,7 +124,8 @@ export default defineConfig({
123
124
{ text : 'moveElement' , link : '/zh-CN/api/move-element' } ,
124
125
{ text : 'resize' , link : '/zh-CN/api/resize' } ,
125
126
{ text : 'centerContent' , link : '/zh-CN/api/center-content' } ,
126
- { text : 'enable/disable' , link : '/zh-CN/api/enable-disable' }
127
+ { text : 'enable/disable' , link : '/zh-CN/api/enable-disable' } ,
128
+ { text : 'getImageBlobURL' , link : '/zh-CN/api/get-image-blob-url' }
127
129
]
128
130
}
129
131
] ,
Original file line number Diff line number Diff line change
1
+ # getImageBlobURL
2
+
3
+ ## Introduction
4
+
5
+ ` getImageBlobURL ` Export the image content from the canvas, extract the canvas content into the memory ` Blob ` , and generate the image's ` blobURL `
6
+
7
+ ## Arguments
8
+
9
+ - ` {object} ` ` options ` Configuration options for exporting images
10
+ - ` {number} ` ` options.devicePixelRatio ` Device pixel ratio, default is ` 1 `
11
+
12
+ ## Returns
13
+
14
+ - ` {Promise<object>} ` Returns the complete canvas image data
15
+ - ` {string} ` ` blobURL ` A ` Blob ` ` URL ` to a canvas image in memory
16
+ - ` {number} ` ` width ` The width of the exported image in logical pixels
17
+ - ` {number} ` ` height ` The height of the exported image in logical pixels
18
+ - ` {number} ` ` devicePixelRatio ` Device pixel ratio for exported images
19
+
20
+ ## Usage
21
+
22
+ ``` js
23
+ import { iDraw } from ' idraw' ;
24
+
25
+ const app = document .querySelector (' #app' );
26
+ const options = {
27
+ width: 600 ,
28
+ height: 400 ,
29
+ devicePixelRatio: 2
30
+ };
31
+ const idraw = new iDraw (app, options);
32
+
33
+ const { blobURL } = await idraw .getImageBlobURL ({ devicePixelRatio: 1 });
34
+ ```
35
+
36
+ ## Example
37
+
38
+ [ More Demo] ( https://idrawjs.com/playground/?demo=api-getImageBlobURL )
39
+
40
+ <iframe class="idraw-playground-preview"
41
+ src="https://idrawjs.com/playground/?demo=api-getImageBlobURL&header=false&sider=false&default-editor-split=50 "
42
+ width="1000" height="480" frameborder="no" border="0"
43
+ style="border: 1px solid #cecece; margin: 0px auto;"
44
+ > </iframe >
Original file line number Diff line number Diff line change 12
12
- ` 'scroll' ` : 滚动条功能
13
13
- ` 'scale' ` : 缩放功能
14
14
- ` 'info' ` : 信息显示功能,例如显示坐标信息
15
+ - ` 'selectInGroup' ` : 在组合中选择元素
16
+ - ` 'snapToGrid' ` : 对其到网格和辅助线
15
17
- ` - ` 其它功能待开发 ...
16
18
17
19
``` ts
18
- type IDrawFeature = ' ruler' | ' scroll' | ' scale' | ' info' ; // TODO other feature
20
+ type IDrawFeature = ' ruler' | ' scroll' | ' scale' | ' info' | ' selectInGroup ' | ' snapToGrid ' ; // TODO other feature
19
21
```
20
22
21
23
## 返回值
Original file line number Diff line number Diff line change
1
+ # getImageBlobURL
2
+
3
+ ## 说明
4
+
5
+ ` getImageBlobURL ` 从画布中导出图像内容,把画布内容提取到内存` Blob ` 里,并生成图片的` blobURL `
6
+
7
+ ## 参数
8
+
9
+ - ` {object} ` ` options ` 导出图像的配置选项
10
+ - ` {number} ` ` options.devicePixelRatio ` 设备像素比例,默认为 ` 1 `
11
+
12
+ ## 返回值
13
+
14
+ - ` {Promise<object>} ` 返回完整的画布图像数据
15
+ - ` {string} ` ` blobURL ` 画布图像在内存中的` Blob ` 链接
16
+ - ` {number} ` ` width ` 导出图像逻辑像素的宽度
17
+ - ` {number} ` ` height ` 导出图像逻辑像素的高度
18
+ - ` {number} ` ` devicePixelRatio ` 导出图像的设备像素比例
19
+
20
+ ## 用法
21
+
22
+ ``` js
23
+ import { iDraw } from ' idraw' ;
24
+
25
+ const app = document .querySelector (' #app' );
26
+ const options = {
27
+ width: 600 ,
28
+ height: 400 ,
29
+ devicePixelRatio: 2
30
+ };
31
+ const idraw = new iDraw (app, options);
32
+
33
+ const { blobURL } = await idraw .getImageBlobURL ({ devicePixelRatio: 1 });
34
+ ```
35
+
36
+ ## 示例
37
+
38
+ [ Demo完整预览 Playground >>] ( https://idrawjs.com/playground/?demo=api-getImageBlobURL )
39
+
40
+ <iframe class="idraw-playground-preview"
41
+ src="https://idrawjs.com/playground/?demo=api-getImageBlobURL&header=false&sider=false&default-editor-split=50 "
42
+ width="1000" height="480" frameborder="no" border="0"
43
+ style="border: 1px solid #cecece; margin: 0px auto;"
44
+ > </iframe >
You can’t perform that action at this time.
0 commit comments