Skip to content

Commit a69e426

Browse files
committed
docs: add doc of getImageBlobURL
1 parent a8c1eb0 commit a69e426

File tree

4 files changed

+95
-3
lines changed

4 files changed

+95
-3
lines changed

.vitepress/config.mts

+4-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ export default defineConfig({
5555
{ text: 'moveElement', link: '/en-US/api/move-element' },
5656
{ text: 'resize', link: '/en-US/api/resize' },
5757
{ 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' }
5960
]
6061
}
6162
],
@@ -123,7 +124,8 @@ export default defineConfig({
123124
{ text: 'moveElement', link: '/zh-CN/api/move-element' },
124125
{ text: 'resize', link: '/zh-CN/api/resize' },
125126
{ 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' }
127129
]
128130
}
129131
],

src/en-US/api/get-image-blob-url.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>

src/zh-CN/api/enable-disable.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
- `'scroll'`: 滚动条功能
1313
- `'scale'`: 缩放功能
1414
- `'info'`: 信息显示功能,例如显示坐标信息
15+
- `'selectInGroup'`: 在组合中选择元素
16+
- `'snapToGrid'`: 对其到网格和辅助线
1517
- `-` 其它功能待开发 ...
1618

1719
```ts
18-
type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info'; // TODO other feature
20+
type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info' | 'selectInGroup' | 'snapToGrid'; // TODO other feature
1921
```
2022

2123
## 返回值

src/zh-CN/api/get-image-blob-url.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>

0 commit comments

Comments
 (0)