vscode/imagemarkpengent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ステップ2基本実装

Browse Source
This commit is contained in:
ry.yamafuji 2025-06-07 20:40:36 +09:00
parent c825fb3f74
commit bdff6c1e31
5 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/pg_task.md
View File

@ -29,7 +29,7 @@ VSCode拡張機能「ImageMarkPengent」の実装タスク一覧です。
### 1. コマンド登録と右クリックメニュー対応 ### 1. コマンド登録と右クリックメニュー対応
- [x] `package.json` にコマンドを登録する - [x] `package.json` にコマンドを登録する
- [x] `explorer/context` メニューに「Open in ImageMarkPengent」を追加 - [x] `explorer/context` メニューに「Open in ImageMarkPengent」を追加
- [ ] 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定 - [x] 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定
### 2. WebViewで画像表示 ### 2. WebViewで画像表示
- [ ] コマンド実行時にWebViewパネルを開く - [ ] コマンド実行時にWebViewパネルを開く

BIN
examples/sample_640x480.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

1
package.json
View File

@ -2,6 +2,7 @@
"name": "imagemarkpengent", "name": "imagemarkpengent",
"displayName": "ImageMarkPengent", "displayName": "ImageMarkPengent",
"description": "", "description": "",
"license": "MIT",
"version": "0.0.1", "version": "0.0.1",
"engines": { "engines": {
"vscode": "^1.99.0" "vscode": "^1.99.0"

18
src/extension.ts
View File

@ -1,6 +1,8 @@
// The module 'vscode' contains the VS Code extensibility API // The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below // Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode'; import * as vscode from 'vscode';
const path = require('path');
import { getWebviewContent } from './webviewContent';
// This method is called when your extension is activated // This method is called when your extension is activated
// Your extension is activated the very first time the command is executed // Your extension is activated the very first time the command is executed
@ -22,12 +24,22 @@ export function activate(context: vscode.ExtensionContext) {
vscode.window.showWarningMessage('対応画像ファイル（.png, .jpg, .jpeg）を選択してください。'); vscode.window.showWarningMessage('対応画像ファイル（.png, .jpg, .jpeg）を選択してください。');
return; return;
} }
vscode.window.showInformationMessage('画像編集コマンドが呼び出されました: ' + uri.fsPath);
const panel = vscode.window.createWebviewPanel(
'imageEditor',
'ImageMarkPengent',
vscode.ViewColumn.One,
{
enableScripts: true,
localResourceRoots: [vscode.Uri.file(path.dirname(uri.fsPath))]
}
);
const imageSrc = panel.webview.asWebviewUri(uri);
panel.webview.html = getWebviewContent(imageSrc.toString());
}); });
context.subscriptions.push(disposable); context.subscriptions.push(disposable);
context.subscriptions.push(disposableOpenImageEditor); context.subscriptions.push(disposableOpenImageEditor);
} }
// This method is called when your extension is deactivated
export function deactivate() {}

29
src/webviewContent.ts Normal file
View File

@ -0,0 +1,29 @@
export function getWebviewContent(imageSrc: string): string {
return `
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ImageMarkPengent</title>
<style>
body { margin: 0; padding: 0; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = "${imageSrc}";
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
</script>
</body>
</html>
`;
}