YouTubeの動画をスクショするブックマークレット

作りました！！

ブックマークレット

javascript:(()=>{const parseQueryString=(queryString)=>{const params={};queryString.split('&').forEach((str)=>{const[k,v]=str.split('=');params[k]=decodeURIComponent(v)});return params};const{v:videoId}=parseQueryString(location.search.substr(1));const videoElm=document.querySelector('video');const canvasElm=document.createElement('canvas');canvasElm.width=parseInt(videoElm.style.width);canvasElm.height=parseInt(videoElm.style.height);canvasElm.getContext('2d').drawImage(videoElm,0,0,canvasElm.width,canvasElm.height);const anchorElm=document.createElement('a');anchorElm.setAttribute('download',`${videoId}.png`);anchorElm.setAttribute('href',canvasElm.toDataURL("image/png").replace("image/png","image/octet-stream"));anchorElm.click()})();

ソースコード

(() => {
  const parseQueryString = (queryString) => {
    const params = {};
    queryString
      .split('&')
      .forEach((str) => {
        const [k, v] = str.split('=');
        params[k] = decodeURIComponent(v);
      });
      return params;
  };

  const { v: videoId } = parseQueryString(location.search.substr(1));
  const videoElm = document.querySelector('video');
  const canvasElm = document.createElement('canvas');
  canvasElm.width = parseInt(videoElm.style.width);
  canvasElm.height = parseInt(videoElm.style.height);
  canvasElm.getContext('2d').drawImage(videoElm, 0, 0, canvasElm.width, canvasElm.height);
  const anchorElm = document.createElement('a');
  anchorElm.setAttribute('download',`${videoId}.png`);
  anchorElm.setAttribute('href',canvasElm.toDataURL("image/png").replace("image/png","image/octet-stream"));
  anchorElm.click()
})();