diff --git a/.vitepress/config.mts b/.vitepress/config.mts index 874f0c1..f0aa3bd 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -9,9 +9,8 @@ export default defineConfig({ outDir: './docs/', themeConfig: { // https://vitepress.dev/reference/default-theme-config - logo: { - src: './assets/idraw.png' - }, + // logo: './assets/idraw.png', + logo: 'https://idrawjs.com/idraw-logo.png', i18nRouting: true, nav: [ { text: 'Home', link: '/' }, @@ -55,7 +54,8 @@ export default defineConfig({ { text: 'moveElement', link: '/en-US/api/move-element' }, { text: 'resize', link: '/en-US/api/resize' }, { text: 'centerContent', link: '/en-US/api/center-content' }, - { text: 'enable/disable', link: '/en-US/api/enable-disable' } + { text: 'enable/disable', link: '/en-US/api/enable-disable' }, + { text: 'getImageBlobURL', link: '/en-US/api/get-image-blob-url' } ] } ], @@ -123,7 +123,8 @@ export default defineConfig({ { text: 'moveElement', link: '/zh-CN/api/move-element' }, { text: 'resize', link: '/zh-CN/api/resize' }, { text: 'centerContent', link: '/zh-CN/api/center-content' }, - { text: 'enable/disable', link: '/zh-CN/api/enable-disable' } + { text: 'enable/disable', link: '/zh-CN/api/enable-disable' }, + { text: 'getImageBlobURL', link: '/zh-CN/api/get-image-blob-url' } ] } ], diff --git a/src/en-US/api/get-image-blob-url.md b/src/en-US/api/get-image-blob-url.md new file mode 100644 index 0000000..0aa952f --- /dev/null +++ b/src/en-US/api/get-image-blob-url.md @@ -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}` 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) + + diff --git a/src/en-US/sponsor.md b/src/en-US/sponsor.md index 55fa88f..96dc736 100644 --- a/src/en-US/sponsor.md +++ b/src/en-US/sponsor.md @@ -4,4 +4,91 @@ iDraw.js is an MIT licensed open source project and completely free to use. The ## How to Sponsor -Sponsorships can be done via [OpenCollective](https://opencollective.com/idrawjs) ([https://opencollective.com/idrawjs](https://opencollective.com/idrawjs)). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers. +Sponsorships can be done via + +- [OpenCollective](https://opencollective.com/idrawjs)  ([https://opencollective.com/idrawjs](https://opencollective.com/idrawjs)) +- [GitHub Sponsor](https://github.com/sponsors/chenshenhai)  ([https://github.com/sponsors/chenshenhai](https://github.com/sponsors/chenshenhai)) +- [Buy me a coffee](https://buymeacoffee.com/chenshenhai)  ([https://buymeacoffee.com/chenshenhai](https://buymeacoffee.com/chenshenhai)) + +Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers. + +
+ + + + + + + + Open Collective + +
+ +
+ + + + + + + GitHub Sponsor + +
+ +
+ + + + + + + + + + + + + + + + + + + + Buy me a coffee + +
diff --git a/src/zh-CN/api/enable-disable.md b/src/zh-CN/api/enable-disable.md index 6803891..5ce5656 100644 --- a/src/zh-CN/api/enable-disable.md +++ b/src/zh-CN/api/enable-disable.md @@ -12,10 +12,12 @@ - `'scroll'`: 滚动条功能 - `'scale'`: 缩放功能 - `'info'`: 信息显示功能，例如显示坐标信息 + - `'selectInGroup'`: 在组合中选择元素 + - `'snapToGrid'`: 对其到网格和辅助线 - `-` 其它功能待开发 ... ```ts -type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info'; // TODO other feature +type IDrawFeature = 'ruler' | 'scroll' | 'scale' | 'info' | 'selectInGroup' | 'snapToGrid'; // TODO other feature ``` ## 返回值 diff --git a/src/zh-CN/api/get-image-blob-url.md b/src/zh-CN/api/get-image-blob-url.md new file mode 100644 index 0000000..ff39aeb --- /dev/null +++ b/src/zh-CN/api/get-image-blob-url.md @@ -0,0 +1,44 @@ +# getImageBlobURL + +## 说明 + +`getImageBlobURL` 从画布中导出图像内容，把画布内容提取到内存`Blob`里，并生成图片的`blobURL` + +## 参数 + +- `{object}` `options` 导出图像的配置选项 + - `{number}` `options.devicePixelRatio` 设备像素比例，默认为 `1` + +## 返回值 + +- `{Promise}` 返回完整的画布图像数据 + - `{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) + + diff --git a/src/zh-CN/sponsor.md b/src/zh-CN/sponsor.md index 55fa88f..96dc736 100644 --- a/src/zh-CN/sponsor.md +++ b/src/zh-CN/sponsor.md @@ -4,4 +4,91 @@ iDraw.js is an MIT licensed open source project and completely free to use. The ## How to Sponsor -Sponsorships can be done via [OpenCollective](https://opencollective.com/idrawjs) ([https://opencollective.com/idrawjs](https://opencollective.com/idrawjs)). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers. +Sponsorships can be done via + +- [OpenCollective](https://opencollective.com/idrawjs)  ([https://opencollective.com/idrawjs](https://opencollective.com/idrawjs)) +- [GitHub Sponsor](https://github.com/sponsors/chenshenhai)  ([https://github.com/sponsors/chenshenhai](https://github.com/sponsors/chenshenhai)) +- [Buy me a coffee](https://buymeacoffee.com/chenshenhai)  ([https://buymeacoffee.com/chenshenhai](https://buymeacoffee.com/chenshenhai)) + +Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers. + +
+ + + + + + + + Open Collective + +
+ +
+ + + + + + + GitHub Sponsor + +
+ +
+ + + + + + + + + + + + + + + + + + + + Buy me a coffee + +