puppeteer-svg-screenshot撮影コマンドを生成するbookmarklet
svg-screenshot-puppeteerの撮影コマンドを生成するBookmarklet
bookmarklet.jsCopied!
javascript:(function(){function f(b){var a=b.pageX-d;b=b.pageY-e;c.style.width=a+"px";c.style.height=b+"px";return{width:a,height:b}}var g=document.querySelector("body"),a=document.createElement("div");a.style.position="fixed";a.style.width="100%";a.style.height="100%";a.style.left="0px";a.style.top="0px";a.style.cursor="crosshair";a.style.zIndex=30010;var c=document.createElement("div");c.style.backgroundColor="#ccc";c.style.opacity=.5;c.style.position="absolute";c.style.zIndex=3E4;var d=0,e=0;a.addEventListener("mousedown",function(a){var b=a.pageY;d=a.pageX;c.style.left=d+"px";e=b;c.style.top=e+"px";c.style.width="0px";c.style.height="0px";g.appendChild(c)},!1);a.addEventListener("mousemove",f,!1);a.addEventListener("mouseup",function(b){b=f(b);prompt("puppeteer-svg-screenshot","babel-node index.js -r "+(d+","+e+","+b.width+","+b.height)+" -v "+(window.innerWidth+","+window.innerHeight)+" -u "+location.href)&&a.remove();c.remove()},!1);g.appendChild(a)})();使い方
closure-compilerを使ってminifyする前の姿
button.jsCopied!
const func = () => { const commandPath = 'index.js'; const body = document.querySelector('body'); const wrapper = document.createElement('div'); wrapper.style.position = 'fixed'; wrapper.style.width = '100%'; wrapper.style.height = '100%'; wrapper.style.left = '0px'; wrapper.style.top = '0px'; wrapper.style.cursor = 'crosshair'; wrapper.style.zIndex = 30010; const rect = document.createElement('div'); rect.style.backgroundColor = '#ccc'; rect.style.opacity = .5; rect.style.position = 'absolute'; rect.style.zIndex = 30000; let start = { x: 0, y: 0 }; wrapper.addEventListener('mousedown', event => { const {pageX, pageY} = event; start.x = pageX; rect.style.left = `${start.x}px`; start.y = pageY; rect.style.top = `${start.y}px`; rect.style.width = '0px'; rect.style.height = '0px'; body.appendChild(rect); }, false); const updateRect = (event) => { const {pageX, pageY} = event; const width = pageX - start.x; const height = pageY - start.y; rect.style.width = `${width}px`; rect.style.height = `${height}px`; return {width, height}; }; wrapper.addEventListener('mousemove', updateRect, false); wrapper.addEventListener('mouseup', event => { const {width, height} = updateRect(event); const url = location.href; const viewport = `${window.innerWidth},${window.innerHeight}`; const range = `${start.x},${start.y},${width},${height}`; const y = prompt( 'puppeteer-svg-screenshot', `babel-node ${commandPath} -r ${range} -v ${viewport} -u ${url}`); if (y) wrapper.remove(); rect.remove(); }, false); body.appendChild(wrapper);};func();