画像を300pxにリサイズしてBASE64化

🖼 Photo_html_Display.convertImageToBase64()

async convertImageToBase64(url, maxWidth = 300) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.crossOrigin = 'anonymous';
        image.onload = function () {
            const ratio = Math.min(1, maxWidth / this.width);
            const canvasWidth = this.width * ratio;  // 1920px → 300px (約16%)
            const canvasHeight = this.height * ratio;
            const canvas = document.createElement('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(this, 0, 0, canvasWidth, canvasHeight);
            const dataUrl = canvas.toDataURL('image/jpeg');
            resolve(dataUrl);
        };
        image.onerror = reject;
        image.src = url;
    });
}

観察メモ
- `maxWidth` は 300 固定。元画像が 1920×1080 の場合、幅は 300px、高さは約 169px まで圧縮される。
- JPEG の BASE64 に変換することで外部ドメイン依存を無くしている。
- 画質は大きく落ちるが、キャッシュなしでも描画できるメリットを優先した構造。
- ギャラリーがミニチュア化され、3D 空間で貼り付けても 300px 相当の解像度しか残らない。