画像をリサイズする

幅：高さ：
以下は、セキュリティを考慮したJavaScriptで画像をリサイズするサンプルコードです。ユーザーが選択した画像ファイルを読み込み、指定された幅と高さにリサイズします。画像データを操作するために、canvas要素を使用しています。

```html
<!DOCTYPE html>
<html>
<head>
	<title>画像リサイズ</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<input type="file" accept="image/*" onchange="resizeImage()" />
	<br />
	<label for="width">幅：</label>
	<input type="number" id="width" min="1" max="1000" value="200" />
	<label for="height">高さ：</label>
	<input type="number" id="height" min="1" max="1000" value="200" />
	<br />
	<canvas id="canvas"></canvas>
</body>
<script>
function resizeImage() {
    var input = document.querySelector('input[type=file]');
    var width = parseInt(document.getElementById('width').value);
    var height = parseInt(document.getElementById('height').value);
    
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
            var img = new Image();
            
            img.onload = function() {
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                
                // 画像のリサイズ
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0, width, height);
                
                // 画像のダウンロードリンクを作成
                var link = document.createElement('a');
                link.download = 'resized_image.png';
                link.href = canvas.toDataURL('image/png');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
</html>
```

ジョーク要素として、画像をリサイズするための道具として「画像縮尺計」という名前を付けてみました。