Zenn
Open3

逆引き: HTML JavaScript DOM 関係

HTML
DOM
ヒカルヒカル

canvas ⇔ 画像データURI 相互変換方法

(1) canvas ⇒ 画像データURI 変換

canvas から画像データURI に変換する方法

JavaScript サンプルコード
const myCanvas = document.querySelector(`#my_canvas_id`);
const strDataURI = myCanvas.toDataURL();

(2) 画像データURI ⇒ canvas 変換

画像データURI を canvas に描画する方法

JavaScript サンプルコード
const image = new Image();
image.onload = () => {
  const myCanvas = document.querySelector(`#my_canvas_id`);
  const ctx = myCanvas.getContext(`2d`);
  ctx.drawImage(image, 0, 0);
};
image.src = strDataURI;
ヒカルヒカル

Chromeで自動翻訳ポップアップを表示させない方法

<!-- ① html要素のlang属性に言語設定-->
<html lang="ja">
  <head>
    <!-- ② metaタグに言語設定-->
    <meta http-equiv="Content-Language" content="ja" />
    <meta name="google" content="notranslate" />
  </head>
</html>
ヒカルヒカル

iOS での 100vh 対応

css
body {
  // iOSでの100vh対応
  min-height: calc(var(--vh, 1vh) * 100);
}
TypeScript
// iOSでの100vh対応
function setFillHeight() {
  // 画面のサイズ変動があった時に高さを再計算する
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty(`--vh`, `${vh}px`);
}

// 初回実行
setFillHeight();

// ウィンドウサイズの変更時イベント登録
window.addEventListener('resize', () => setFillHeight());