js使用html2canvas实现屏幕截取的示例代码
程序员文章站
2022-05-14 19:29:58
整理文档，搜刮出一个js使用html2canvas实现屏幕截取的示例代码，稍微整理精简一下做下分享。
<...
整理文档，搜刮出一个js使用html2canvas实现屏幕截取的示例代码，稍微整理精简一下做下分享。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
.btn{
width:100px;
height:30px;
line-height:30px;
background:green;
color:#fff;
border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
display:block;
text-decoration:none;
}
.container{
background:#e5e5e5;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<script>
$(function(){
$("#btn").click(function(){
html2canvas($("#container"), {
onrendered: function(canvas) {
//把截取到的图片替换到a标签的路径下载
$("#download").attr('href',canvas.todataurl());
//下载下来的图片名字
$("#download").attr('download','share.png') ;
document.body.appendchild(canvas);
}
//可以带上宽高截取你所需要的部分内容
// ,
// width: 300,
// height: 300
});
});
});
</script>
</head>
<body>
<div style="padding:10px 0">
<div class="btn" id="btn">截取屏幕</div>
<p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p>
<div style="margin-top:10px">
<a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a>
</div>
</div>
<div class="container" id="container">
<p style="text-align:center">以下是测试内容</p>
<img src="data:image/png;base64,ivborw0kggoaaaansuheugaaaqaaaaeacayaaabccqhmaaaz2eleqvr4xu2d4xoquw5dt9//oxs/6n20wctjjtto0or8pu5sy7libmr++o+//z7/e5p/pj95qb8fh5vzjfai9gp0ix/kxs41ff8ld5cpuo+c0yw/yh/ff8eas3fwruqib*nta0nregujphmupxupxvfjw+ad7ucwu9heabbud1yhfpw1n7zv0lczr/na1ff8ld5cpug/figkgihbwgqxotkgpvzky0jikh7qg4qvk4fjb96fyraauxa5eoxsdnjs1v1jwgkfxq9dqfju8xd7ophslcicc2mfrlklthqb2sspk4yh+6bqkr5khywfdh2lx5wwga+bruwgtkkqc+vbypvg6ybi1n/jktxpvyfvbivjk8uhxpdgqmsl5dz8fogpafhqfrcxvjkagiqdgrxpvyfupodii1a/fl2jl45nzz7gtaxhatiluryneaf5vcyrhzgme4pv6dhegddvrwevhftfxnv6uobe/nf5apwmpu9q6gydnxcqtqikex0a0cwaprcpeeqbqlggaaxgglfeaxafucfdbounpp0xqueemb8uzmbfoao+mojrezxqeeahjlzox0cafttg0b2vaovvznroyfxuaz34k3/aesdlglerv8lykojtv1hpkrofjoastjuvbntauwiux8drzu/gwasheazrckqwjanwjooaeaahjgagiaoz2c23ctadpkdopa3pi5a1gl+lfbs5cdezlgkvzbqakmziuvoiofmsekalgl/mzahyhuhleaopydt9zpyacl7umloyzdtsel3ytagboeihbq6ktdzoi0ynqyk9pw2pp8vniuui++kwgmwbcqvanez3xounynyhcuqxzxh5opway0/6g9kroio8iwapszkajhhpew50euvaia5y4uwquarcbplnqvlgcddvxejnjdeluahda5o8mcbgacmblhi8a1oe7o8bfaciadqzvweya6vbfaopy0qnut38p4hvyv3zwngaumjsxx0wuoj6vcqqakunwtzw1p9ddhsokjzwcfpf2kqhosmrgi640rwtgurqu3duelxnaqzxmrhgaehmochc0ao3lwxmqgdrwzrq8trb5hkanaiczah5rvprymqbqulqvfbro9si/lrufeyai0hgataa/eadnru2ltlwzu3xeaipirwaiabea83e2qwip42uxv3fnigargajabpt4doirs/katfj8npgoed+rd8oqwqfzyxjfsjlwkhcphoq99vmajqc6holojdv1txpbe1wa7ufj6mseno6ccc1bmchohhtzww2vvvw4rga2kkqni7oaz21omqosbyu1rvmmggeeiwargflfrqduyaj4zaio0wzfii7hykletxafdhtkncfd/tsxceaxx/1ae+ykuecye0amgbjboksmfmgpiyruuqkyrgc0ub32tji4pwwaf7wfktp5pdop4kvtlxp09ifiy/hfigwzo9d0fco+6idiskpjdxrvqpthab6qc6nrpa5wdazubj16xqqganbdgdy0tvdg59/i4+hgvvepaeqaigcfn5v9o3zsohz6ojavy10eiaiqafjlavbjp/txyi55j7oqlh1fz6wgr/0jijvtjzzl8ufrqgbf85jz/4k2uab3eqfw0uj+rwjam7yuk1f1igae3kyapdhu7kljrpcanktk6uwhunxkaqaoe+wjab4ciwa/eigahegq89yradogp7flbjarwih0smwdabdaul1jbcacccc9lfsflgd0bqdk5bw7k6/typqtpbwsqmgo+ni1sj2ux77rmo56uhcnbzizwih5rwaeejva/lh8naj+2lhizoruiijtciwmyxoqckqdkdwkguzcxcmp8mcqyed/deglrhbroxfoaz0+aagvzuvaxtm1avxkg0qa7istaqcns0iezq09cwiz0uzthjfglang9skxvwdqzdpczqjwtjw4cqbxjuvm6crfp4nvh2fscikhud4a8gzaebzrr1yxigc7so4araa2ikkguhtlyqanv94adrl/z6dukf7j6atpfdjkn6kgj/5xuaa519o5qrmav+7ulpjccqb7uxtvbce7uwpl93ektykvwh8xd6fvbhgawjmvajqbko5f7wsovg5fg9d1mkcatmt3yt8dcjfegz3pekx46bctcmbzzzxiqqvqqxkmgclkcrgrrcyzlyw14rtyhpkzc3e6tyaatab3cfacky3jpixpxts+1l0gixfudj8iqaqgaib8fdfq84fghghwvgb4pqdlxpoexhdxkof7h7/q072ul568mw96r3xykpkkw7ez5kq8eqdaqrv2lfjkq+nv8rebuecgarcoarw1poslqtnjcfaroriurfohb2fnlxgzadauzqswi5hcxi5hszpfkxk4ba4j3gjalp33dwihzno6d+thbjd9ytxb0pwiabthrfa0sjcwo4pl4xcog2cvmqjal30dcdahshdtnqvbvpkx5qem1br3+iukmonqt+nsdgmf3618zpi78pj6gp0ieawfkmd2cit7qwr5xefzvqx3kcgvgxotxz0s1jnfbc8a18qarwaoffrtclesdeq8zqkkalcvgev0iwargdrrgkvc0ahahwaf31wbhhcgo1q9plpljoa6dmesn3k1xfnztaczaoodbyyveyotqb1gbd9ttgcjhwrzmwc9df+wioo6fdc9ljotrnm3u41iunqeimvhvjqj12kpalarjbpguqhgpz4saajvvbvy8kgn4xgdxksiqa1+z8glqkuaaovqsnlywrwyxksiqa1+z8glqkuaaovqsnlywrwyxksiqa1+z8glqkuaaovqsnlywrwyxksiqa1+z8glqkuaaovqsnlywrwyxksiqa1+z8glqkuaaovqsnlywrwyxcvxvw4soyekhge1e/gmhvlyoavc6wmwk/3ol9pffnn6ugwve6uedi3yqqznramh7d8gpibcklpwbiesaxhgrsecjrc1jwdqlmb2sj0iaa8yu0rpvrqvpjib1mvs+ykz0osszcfwiu8iqatghgalelxpbobq9e19lhpeaciaeqdhlypoccqvjmpfbgadmfroratli+r8+1cugbkc5arwewe8avalow2onijycejzubpdyx3kh8arnabkmq14o/luuj87fbjqqlyjztyjacidxvzt0qijujrmvtzeao4rodwnwh4b2gbcjobnujrmvtzeacia0/oqkmkuantw0pncawzltqqgahabgccgij/rrqg0s7imahabiabeao4q6ba+5wod8smpsmaljnsy+xnvapquvmhqfme7mtljtfobfz0syjmhqwlmtad5zfzyttikd2fnkxff7lmaclyeoe6jcmazvh0iqzmtnpskj1n+degtiqbeacoizalyed/658bulvefodteezgcevcbyxwg0t77nhgacma+sxoe9cia9tk4bnwponkdqnfp+gmqyqoti0czaop3zydwrvpfalabdvjvatbrukm5ncsip/bk30bvd02v95ko0dnft10angxw1rajhlmfo98edbveszd6vooeaxj9rheezrtmtt8ranbb9dsiantbdzkanttfnk5xk+n1+o4a1dk6vnnt8swip5axpda1vfi42rdr/9k9oalgrpn16cpzj1wbqg0jam9g0akpwl1r2ue7e8bugb4naefybaid6xxrlsmkit/kej2+iwb1juykalcipk5srwdq6p9parh9e3dlaeasicspzzkh09kmsnqval9vl33ldqycpkyzzqsz4kvtz+81zoni+lcarsbzp0v9zqns5crdstilgjra1f7bduwu4axhbgadavfjkmtkbfaxxzv1igc8/trvndkuxsse8iaabsjnxzw5arzeueo9mgfkargheafqzph7nc7xvkmeeyaiqatg9b6/7rabep0k1/yioppbahopdyq1crc08ndzk+xhbmuesry05srj6aqteivlqhi/p5g4xzl6vl6xiga1sionfqgoyatyrqdqqm24gweo4hgbkai1+aoi+g77lhgafyz+wuqa6lgnlsmadrcdwdmnqfwbnthmbfdktzpuyulvdhp3mxo2jysuj1yrgpqdyt4aajcaeyepxy02c1+j1xwx4huu4mqqxjojygmccp0tac3g9qxy4zkahktwclg2ylji7fltxfazafx1ctzcwarjdevjb0embwargbotaghvu6owzb6vm94iwd7e/ywo7hgatab1dgflssszyeua6sbt3cmaeya6u4aljwieaia7maw4rwaiab7mpexcirgb8jsb4h4biab4mbcboarhuumveybr4s77omshbv15ojv5ocquyejxkjim6khzmzunzynyxf3bozfx8oqk1cxe9q8drysjqnyar7nqshpqnqomr5p9srgtfvsryex50yfkeqcaac1gbacakzysnbees4xpvbeawb96snqoeaqafdacuablyauy0x+guqiuuxmwigqcmjoropgrqjem4lert3z38qoe/bdlbkcimrnqeybn0oli3vgpxae2efdiw+yxmxn1ozx2zysc89dhfewyadszsvlz2jca+ota79achasu00a3pljrnp5xujfrhmwzl91rfk8yztixonkoion/d4askqjysykqa4cpvzhufsjuqh96t92yjwdu0adcr+/8454/+oj1yhebubbdscyccbzomqa2skwguhvna0smgooa43pkte6qtad3cdixclv1flmmabfkb++tcea4gjxds1ldxdkvcqqatdgu0n37radcih7vpzszsuauajd6rsd6ougcrlka0lhr4sp5+kl4d9gz5qg8bltinv0nkh+uh0ynvinmab5oviu+d/8iklm5larporsyo3ok/p2kpnvrwcmaddhkd2p/rucmafaulesiqb1depwh9ori0gnxewo794oa1hmyk8cidxha0nq+avbc2okjycyaobod00wadqxpq1p7ceaeomrg5303alcc/gpeg5rakz7+9bvg9lca9zl6leldrmlm2rsrfxtesxtbwyt6gnkrnwioe1f2u8gidxw+gvzfmgjqk7fcdlrc30lqgql3vn8vk5p3bmd0eewbjwa8a69gkgngneglaeqasgdsr3n2+fdg9g5xp0jgr7wlij8ykt5ybsgirzddsutnxswub2b0xkv3nz3crqdqaeya6lhz/8knnga/ndsgdlsi89uxosledgvqtryt4jtvntmtzzwivhmp/qvxzc1wpvx1vzp8tobw3lmx07ctfyevh4cu/ukwmmae4bkxpzmvnrgaewqohqvfmgjgeosggkvjopzoht6u0zli5br3nsj0l2rvzfuzzjz+8q+cuoezadibvdjjbek6f7wv5oowyqsqcecggdi15aqqk8ceegucmigmbu5qr1wzcgv4fflkg8cefbt+f64arxmxalag2g8totjtexanbr30cqch/fpkp/jsej2n8wgjgtmm0xfdik4mclzotdpqedqm078xeac/blkkhrioalbhwchqallppqv6zvuwlff7o3omrfru81zfbvzapivsse1phbptjgbwevoptvuxtbogr4tijgbq4qhahswfq6pjngmgpklchsxxghvafflte8d5eldfs/amcslyrqd6btytqb1z6tv3talpo+ukaapo/jcf/uwjicu1k5h3hqxesj/6ut7odjjhyvgpcvnjfdli9wxjpq0h5rvfq53sdv8ikboyayawy/aio4y11l/sonqhwu+1vfjqft2u68cjq/rx5xebegbwbkdeohga17gkanqxhfoqinkrrom06lrrgyc/bhebqcnj+vbfed9yvqdmajka9hk0siga1kglagxg5sjqjoa6ez2wrvopmsk1p346pr7vedgmacczkchkoagikz5ghko+lydu5s2dngit01mvdr3c7fbb63eth+snwvymqdqnbulfrwtggqentyjhv4qim29feidcjadcq6oqhbaeik8manrq2/zkbannlt5orjkanhbtchgbqfpperlwvx5zkrv9jx801ghabedhzg0nfb68abwe90u45wrwgaadw/mg8eyhceade+fko+cobwc0gi5rs2apkm7e6qpdtltpxdrvzxyldvlyoykqnh8dppxx0b5rffputnuq/jkwjvye4llceya67smax2kffw8galaf+6hsd5zck8wntuvvywhahtufqwha8w1aac4iqj28fct67xo9kvsdqjb2xbsbmfszfnz2p6ekvksgft2zh/wtlkfdhzouvae8ija3glwbka32b00eoi6eglwualkc7dlm+e6z66xyj46rehyrnaq64rukac06lwzhuossodnej1yrr07nfyfmoxwvgzatunmnjlq0igcgszri4pqburuauvlq/c8srh2hf8vx4yllh/q9ga4qxappgbr4vqriitfzbdsmdt+rse3gluwcgonlrwrgg/vkqwizox3qxqxkoftnavhekclcodxmfqcurclibkag8gpsmwhc1yktqcaawuearciaz0aqmlrmaj/uy4akyvjhfdgl3kwnhpj9buqd5ub8pz69i1ckof/onrh25efrubqrjwjafckuianrlnoaeouspqlatm0f360argaohs9d9/zmahujwk1qwnnleo0apkbgt8guv2rkbiupuiytqp20zrxgwkxybtaiwqsgdo26wnggpvbodxflkqnpsv+wig8n3yiaeyabapryztgz+lamkdq2k80zaxhawhl3pudukszzj5kh7p3pdjxh6hvjybfjdrwts8ze81becekeqbnucqwasuunaqcgv2znb69ozkpmdi3c9qhaszirgcjqjzcjjdmrshitxrmb2kikakomghseostp2ys0czy+6bui84qscd0tqlh6hu2qn4bimxbmigb1hcmarawiaewgtmawaagxaf8kwh3rl0ulcd6pgdm86gfyheogug/nwev5o3bbgyvpxcvtrbyi/zaitvwhnfj0ghe1v0hlldthrauf/3p6cggi1nwpmkqtao4r7z01zwrqrkrckmuhigb3lvkmpwkpt29m5vumgfq9iwdpohvmaooppvy1fpzdkgkwoa4kqayfygsqced/cfh5lqmgpiyrgewanaycbxubob7jjw8rgajaatod/vbr+x7asncczenmq7m/uvwrmlh8z/ahp5csk+ttiln+muvbzpgpi+snwzxb0b0usrtimos1avcmtgtghhofu7q/phynadjhrbv3pfgcl21t5whajsm1nf+3yhxgdqyho2qcyaswr69mahsiff6/aulku3il7wkch5pkasgeycdyboazugute2e2nowanewajv4egjnucnlcp+1zg6odx6epltgq/bnltvei9grmio/d/xzascqf+mwfcec9ai6spq/og2801qpulzugcxhr6dsv02wfcecrtytprmkil5tfaooq0oam9vvivi0vhxgaitirgcjqo2yrcvqaxhxaon27ysoeadi9krggzjdmmwhu4amnte3rkwqckp51fqpwbiaitm2/ekdne9k9ql2ctujjeaxooa1gsdiv0cikomdn8oiil459cofoptpiumplc6dcuozv6g8lpxrvllujjwfdcdjixo8lpr99n/m2gtgqb0ezrqduetjrhwnzursbqbu9e0bdyp2hh3jc1ip9sqqnlqmaigztmwhuaxm2wyaa2meqaajzu7kmanrhiwdusalxqfwbxsdw2iecuictaldhkglwjad+fmb5j6n3l2qvpak+tqfvhzxcrhud+u56fkvn2feppw/nxk6+d6939bewalavmw1c58hjfuca6nxtsowapcdtbiseqerrarngabsu62uch1fdq27p5hsmgkky6oxauf8zvx9abyuktyyaz+u9e0uaik2rkdttkkwktakzasgo19copknv7remaeqabghqwalikwna38cv7hgbiabeaf7toh/rmwfsxfn/w6cam46sldo9tzu8nkeek17nvwb4ecx8stbkrjwt2qgtjb9f8t0apxgmb8twk1dddy3nrngjak8/cm9qhgea3zsjoa5wboa4rdibbgblrxafobga40itjodkdbf8khwlfjshr/oiaeqa6p24yukj5gwqgniualkcldhdfzmqrnkpkgvenflipacqxdb5qtfyl/yutjwc59ylyjldg8alcohxpwk6ctjxqhv15a3noiyz1yoz0pwuget6+i0aplbfuvfn0d+6uwvbrwakip3fpaorceaeom5ig2uhqtmb1asvayga1nlisiwa1ehswcoceagom9jg2uhqtad1qkuaigb1thgsiwb1eduwwgjqd1+3pikrnpw+6f7ufvyithnxxrzx+laewcm+9oo2cx40lhotxvzlsasgoahmckkls+3v4m7fhaf4riucsmeuqnckyo3wka1c/tt90l2ofqsavzfigwgianwquitprbh3o53py5sizcvrmzmdghflcjo8l2tfyhifybxghobcokovgbtrzo2gfmllebmtnreaigkrwvpjuewazyrzwy8/pqgafm0zvcjgcq7jbwfcj7bkxjd/pu7utykwnc4ak4tr//zxtsxtrey/cezoxrefladd5789igb1nju60walahjqmxwdqg/fz6kqyxvdbkcopfknced9+mpfkhnajdgrgbpof6siqb0r5bowafdgi3ajanthigdusyoaakwuyohtp6yrgdqssp2spxr8j9lgmdgy6gjvlpmi+ictqqwa1ptweyb9jp5zkhwizzzhqe89/genn9jbgdvuegaaaabjru5erkjggg==">
</div>
</body>
</html>
由于使用最新版本的html2canvas截取屏幕有问题，所以上面使用的是v0.4.1版本进行测试。
注意事项：
1.页面加载完之后再调用html2canvas。
2.截取背景图片没有效果（就算把背景图片转为base64也没有效果）。
3.<img>标签的图片需要转为base64，不然截取没有效果（网上搜索了一下，好像都说是跨域问题）。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。