Skip to content

Instantly share code, notes, and snippets.

@coo11
Created July 25, 2020 17:36
Show Gist options
  • Select an option

  • Save coo11/bf0ded454406838c5c190c05ef20a5c4 to your computer and use it in GitHub Desktop.

Select an option

Save coo11/bf0ded454406838c5c190c05ef20a5c4 to your computer and use it in GitHub Desktop.
A bookmarklet can capture DOM with custom background color and scale by [html2canvas](http://html2canvas.hertzen.com).
javascript:!function(){if("about:blank"==location.href)return;let d=document,a=d.createElement("script");a.src="//cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js",d.body.appendChild(a),a.onload=function(){let t=prompt("Enter a DOM Object or just Selector:");if(t){try{t=eval(t)}catch(e){try{t=d.querySelector(t)}catch(t){if(t instanceof SyntaxError)return}}if("string"==typeof t||!(t instanceof HTMLElement))return;window.pageYOffset=0,d.documentElement.scrollTop=0,d.body.scrollTop=0;let f=[null,3],x=prompt("Enter your custom params (backgroundColor,scale):","null,3");x||(f=x.split(",")),html2canvas(t,{dpi:window.devicePixelRatio,backgroundColor:"null"===f[0]?null:f[0],scale:"0"===f[1]?0:f[1],useCORS:!0}).then(t=>{let e=t.toDataURL("image/png",1);window.open("","_blank").document.write(`<html><head></head><body><img src="${e}" style="width: 100%"></body></html>`)})}}}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment