Wiki_JS_ローカル画像ファイルを取得してアップロードする方法 - inoueshinichi/Wiki_Web GitHub Wiki

画像をウェブページ上に表示する方法

  • ブラウザ内のスクリプトプログラムから自動でローカルファイルにアクセスすることは, セキュリティ面から不可(ブラウザの設定次第では可能).
  • <input type="file" [multiple>入力フォーム経由で人間が主体的にローカルファイルの選択をする場合は, 一時ファイルオブジェクトとして取得可能.
  • 一時ファイルオブジェクトとして取得した後, サーバーへアップロードする2ステップが基本.

参考

データ形式

  • Blob : バイナリ形式, ローカルファイルを示すBlob URLが発行される
  • Data URL : テキスト形式, ローカルファイルを示すData URLが発行される (Base64)

画像ファイルをBase64文字列に変換する方法

  1. Canvasを用いる方法
  2. FileReaderを用いる方法

1. Canvasを用いる方法

//===================================================
// <img>要素 -> Base64形式の文字列に変換
// img : HTMLImageElement
// mime_type : string "image/png", "image/jpeg", etc
//===================================================
function cvtImageToBase64(img, mime_type) {
    // New canvas
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    // Draw image
    let ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    // To base64
    return canvas.toDataURL(mime_type);
}

//===================================================
// Base64形式の文字列 -> <img>要素に変換
// base64img : Base64形式の文字列
//===================================================
async function cvtBase64ToImage(base64img) {
    // 画像データの取得(同期処理)
    const loadImage = (src) => {
        const image = new Image();
        return new Promise((resolve, reject) => {
            image.onload = () => { // 成功
                resolve(image);
            };
            image.onerror = (e) => { // 失敗
                reject(e);
            };
            image.src = base64img; // トリガー
        });
    };

    const img = await loadImage(blobURL).catch(e => {
        console.log("[ERROR] image.onload");
        return;
    });

    return img;
}

2. FileReaderを用いる方法

FileReaderによる非同期処理の結果をasync/await,Promiseでグローバル変数に格納する

//===================================================
// File -> Base64形式の文字列に変換
// file : File
//===================================================
async function cvtImageToBase64(file) {
  // Blob URLの作成
  let blobURL = window.URL.createObjectURL(file);

  // Blobの作成
  const blob = await fetch(imageAttribList[i].blob_url).then(r => r.blob()); // 同期処理 (blob-url to blob)
  const filetype = blob.type; // mime_type: 'image/png', 'image/jpeg', etc

  // to Base64 Text
  const reader = new FileReader();
  reader.readAsDataURL(file);
  await new Promise(resolve => reader.onload = () => resolve()); // 同期処理

  const base64DataURL = reader.result;
  const base64Str = base64DataURL.split(',')[1];
};
  • reader.onloadのコールバック関数でresolveしてあげれば、ロード完了時にresolveされる.
  • それをawaitするのでロードが完了するまで待機するという処理が完成する.
  • なお、await演算子を利用しているため関数にはasyncをつけること.

ローカルからアップロードした画像の寸法を取得する方法

blobURLからBlobオブジェクトを作成する方法

async function() {
  let blob = await fetch(url).then(r => r.blob());
}
⚠️ **GitHub.com Fallback** ⚠️