Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
7cef531565 | ||
![]() |
5e4d7943ec | ||
![]() |
4a7160e97e | ||
![]() |
9d0be6411a |
@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。
|
VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 主な特徴
|
## 主な特徴
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
# ImageMarkPengent
|
# ImageMarkPengent
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
A VSCode extension for intuitively drawing red circle marks and annotations directly on images.
|
A VSCode extension for intuitively drawing red circle marks and annotations directly on images.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
@ -164,11 +164,11 @@ GitHubやGitLabにリポジトリがある場合はrepositoryフィールドを
|
|||||||
|
|
||||||
2. **公開**
|
2. **公開**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
vsce publish
|
vsce publish
|
||||||
```
|
```
|
||||||
|
|
||||||
初回はアクセストークンが必要(Marketplace から取得)。
|
初回はアクセストークンが必要(Marketplace から取得)。
|
||||||
|
|
||||||
#### メリット
|
#### メリット
|
||||||
|
|
||||||
|
@ -3,7 +3,9 @@
|
|||||||
"displayName": "ImageMarkPengent",
|
"displayName": "ImageMarkPengent",
|
||||||
"description": "",
|
"description": "",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.0.0-alpha",
|
"version": "1.0.2",
|
||||||
|
"publisher": "PengentAIRyohYA",
|
||||||
|
"icon": "readme/images/logo.png",
|
||||||
"engines": {
|
"engines": {
|
||||||
"vscode": "^1.99.0"
|
"vscode": "^1.99.0"
|
||||||
},
|
},
|
||||||
|
BIN
readme/images/logo.png
Normal file
BIN
readme/images/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 119 KiB |
@ -89,6 +89,9 @@ export function getWebviewContent(imageSrc: string): string {
|
|||||||
let markColor = colorPicker.value;
|
let markColor = colorPicker.value;
|
||||||
let markLineWidth = parseInt(lineWidthSelect.value, 10);
|
let markLineWidth = parseInt(lineWidthSelect.value, 10);
|
||||||
|
|
||||||
|
// VS Code API を一度だけ取得
|
||||||
|
const vscode = window.acquireVsCodeApi ? window.acquireVsCodeApi() : null;
|
||||||
|
|
||||||
// UIイベント
|
// UIイベント
|
||||||
moveBtn.onclick = () => setMode('move');
|
moveBtn.onclick = () => setMode('move');
|
||||||
selectBtn.onclick = () => setMode('select');
|
selectBtn.onclick = () => setMode('select');
|
||||||
@ -118,6 +121,7 @@ export function getWebviewContent(imageSrc: string): string {
|
|||||||
draw();
|
draw();
|
||||||
};
|
};
|
||||||
saveBtn.onclick = () => {
|
saveBtn.onclick = () => {
|
||||||
|
console.log('Save button onclick fired!');
|
||||||
// 元画像サイズのオフスクリーンcanvasで保存
|
// 元画像サイズのオフスクリーンcanvasで保存
|
||||||
const offCanvas = document.createElement('canvas');
|
const offCanvas = document.createElement('canvas');
|
||||||
offCanvas.width = img.width;
|
offCanvas.width = img.width;
|
||||||
@ -130,9 +134,13 @@ export function getWebviewContent(imageSrc: string): string {
|
|||||||
drawEllipseRaw(offCtx, mark.x1, mark.y1, mark.x2, mark.y2, mark.color, mark.lineWidth);
|
drawEllipseRaw(offCtx, mark.x1, mark.y1, mark.x2, mark.y2, mark.color, mark.lineWidth);
|
||||||
}
|
}
|
||||||
const dataUrl = offCanvas.toDataURL('image/png');
|
const dataUrl = offCanvas.toDataURL('image/png');
|
||||||
if (window.acquireVsCodeApi) {
|
console.log('Data URL created, checking VSCode API...');
|
||||||
const vscode = window.acquireVsCodeApi();
|
if (vscode) {
|
||||||
|
console.log('VSCode API available, sending message...');
|
||||||
vscode.postMessage({ type: 'save-image', dataUrl });
|
vscode.postMessage({ type: 'save-image', dataUrl });
|
||||||
|
console.log('Message sent to extension');
|
||||||
|
} else {
|
||||||
|
console.log('VSCode API not available!');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user