-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
273 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| # getImageBlobURL | ||
|
|
||
| ## Introduction | ||
|
|
||
| `getImageBlobURL` Export the image content from the canvas, extract the canvas content into the memory `Blob`, and generate the image's `blobURL` | ||
|
|
||
| ## Arguments | ||
|
|
||
| - `{object}` `options` Configuration options for exporting images | ||
| - `{number}` `options.devicePixelRatio` Device pixel ratio, default is `1` | ||
|
|
||
| ## Returns | ||
|
|
||
| - `{Promise<object>}` Returns the complete canvas image data | ||
| - `{string}` `blobURL` A `Blob` `URL` to a canvas image in memory | ||
| - `{number}` `width` The width of the exported image in logical pixels | ||
| - `{number}` `height` The height of the exported image in logical pixels | ||
| - `{number}` `devicePixelRatio` Device pixel ratio for exported images | ||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| import { iDraw } from 'idraw'; | ||
|
|
||
| const app = document.querySelector('#app'); | ||
| const options = { | ||
| width: 600, | ||
| height: 400, | ||
| devicePixelRatio: 2 | ||
| }; | ||
| const idraw = new iDraw(app, options); | ||
|
|
||
| const { blobURL } = await idraw.getImageBlobURL({ devicePixelRatio: 1 }); | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| [More Demo](https://idrawjs.com/playground/?demo=api-getImageBlobURL) | ||
|
|
||
| <iframe class="idraw-playground-preview" | ||
| src="https://idrawjs.com/playground/?demo=api-getImageBlobURL&header=false&sider=false&default-editor-split=50" | ||
| width="1000" height="480" frameborder="no" border="0" | ||
| style="border: 1px solid #cecece; margin: 0px auto;" | ||
| ></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| # getImageBlobURL | ||
|
|
||
| ## 说明 | ||
|
|
||
| `getImageBlobURL` 从画布中导出图像内容，把画布内容提取到内存`Blob`里，并生成图片的`blobURL` | ||
|
|
||
| ## 参数 | ||
|
|
||
| - `{object}` `options` 导出图像的配置选项 | ||
| - `{number}` `options.devicePixelRatio` 设备像素比例，默认为 `1` | ||
|
|
||
| ## 返回值 | ||
|
|
||
| - `{Promise<object>}` 返回完整的画布图像数据 | ||
| - `{string}` `blobURL` 画布图像在内存中的`Blob`链接 | ||
| - `{number}` `width` 导出图像逻辑像素的宽度 | ||
| - `{number}` `height` 导出图像逻辑像素的高度 | ||
| - `{number}` `devicePixelRatio` 导出图像的设备像素比例 | ||
|
|
||
| ## 用法 | ||
|
|
||
| ```js | ||
| import { iDraw } from 'idraw'; | ||
|
|
||
| const app = document.querySelector('#app'); | ||
| const options = { | ||
| width: 600, | ||
| height: 400, | ||
| devicePixelRatio: 2 | ||
| }; | ||
| const idraw = new iDraw(app, options); | ||
|
|
||
| const { blobURL } = await idraw.getImageBlobURL({ devicePixelRatio: 1 }); | ||
| ``` | ||
|
|
||
| ## 示例 | ||
|
|
||
| [Demo完整预览 Playground >>](https://idrawjs.com/playground/?demo=api-getImageBlobURL) | ||
|
|
||
| <iframe class="idraw-playground-preview" | ||
| src="https://idrawjs.com/playground/?demo=api-getImageBlobURL&header=false&sider=false&default-editor-split=50" | ||
| width="1000" height="480" frameborder="no" border="0" | ||
| style="border: 1px solid #cecece; margin: 0px auto;" | ||
| ></iframe> |
Oops, something went wrong.