JavaScriptを使用して画像のボーダーを変更する方法

CSSを使用する方法: 画像要素に対してCSSを適用してボーダーを変更することができます。以下のようなCSSスタイルを使用します。
```
img {
 border: 2px solid red;  // ボーダーの幅と色を指定
}
```
上記の例では、画像のボーダーの幅を2ピクセルに設定し、色を赤に設定しています。
JavaScriptを使用してスタイルを変更する方法: JavaScriptを使って画像のスタイルを直接変更することもできます。以下はその例です。
```
const image = document.getElementById('image-id');  // 画像のIDを指定
image.style.border = '2px solid red';  // ボーダーの幅と色を指定
```
上記の例では、image-idというIDを持つ画像要素のボーダーを2ピクセルの幅で赤色に設定しています。

Canvasを使用する方法: 画像をCanvas要素に描画し、Canvasのコンテキストを使用してボーダーを追加する方法もあります。以下はその例です。

const canvas = document.getElementById('canvas-id');  // CanvasのIDを指定
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
 ctx.drawImage(image, 0, 0);
 ctx.strokeStyle = 'red';  // ボーダーの色を指定
 ctx.lineWidth = 2;  // ボーダーの幅を指定
 ctx.strokeRect(0, 0, image.width, image.height);
};
image.src = 'path/to/image.jpg';  // 画像のパスを指定

上記の例では、指定したCanvas要素に画像を描画し、strokeRectメソッドを使用してボーダーを描画しています。

これらはいくつかの一般的な方法であり、画像のボーダーを変更するための基本的な手法です。実際の要件に合わせて適切な方法を選択してください。