データURLには上限がある

URLを指定して画像要素を生成する場合は問題ない（上限を感じたことが今のところない）が、データURLには上限があるということを知った。

画像でこんな具合に指定するタイプ。

<img src="data:image/png;base64,iVBORw0KGgoAAAA..." />

画像ファイルをドラッグアンドドロップで受け取って解析する際、以下のように記述していたら、大きな画像の場合にうまく動作しなかった。

//ファイルサイズが大きい場合に動作しなかったコード
promiseForGetFile.then(
  ( file ) => {
    return new Promise(( resolve, reject ) => {
      const reader = new FileReader();
      reader.addEventListener( 'load', ( event ) => {
        resolve( event.target.result );
      });
    });
  }
).then(( base64 ) => {
  return new Promise(( resolve, reject ) => {
    const image = new Image();
    image.addEventListener( 'load', ( event ) => {
      resolve( event.target );
    });
    image.src = base64;
  });
});

これを以下のように書き換えて動作させることが出来た。

//変更後、ファイルサイズが大きくても動作したコード
promiseForGetFile.then(
  ( file ) => {
    return new Promise(( resolve, reject ) => {
      const image = new Image();
      image.addEventListener( 'load', ( event ) => {
        resolve( event.target );
      });
      image.src = URL.createObjectURL( file );
    });
  }
);

データURL

長さの制限として記述がある。Firefoxでは制限なしとあるが、HTMLに直書きする場合とJavaScript内での記述は別扱いか。それとも変数に格納する文字列が大きすぎるとNGとかあるのか。理屈は気にせず、動作してくれれば良い。

DataURI Maximum length

原文ページが見つからないので、検索で見つかったページのリンクを掲載しておく。