wsemi
Version:
A support package for web developer.
70 lines (55 loc) • 17.7 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for html2pic(html2canvas)</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<!-- 用nomodule是因IE11才需要用canvg將svg轉png -->
<script nomodule src="https://cdn.jsdelivr.net/npm/canvg@4.0.0/lib/umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
</head>
<body>
<div style="display:inline-block; vertical-align:top; border:1px solid #aaa; width:140px; overflow-x:auto;">
<div id="src" style="padding:20px;">
<h3 style="margin:0;">text1</h3>
<div>
<span>text2</span>
<div style="display:flex;">
<div style="display:inline-block;">
<svg height="48" width="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m160.105 112.811c16.412-5.974 42.956 25.557 50.661 46.727 5.212 14.32-3.868 30.771-20.28 36.745s-33.943-.792-39.155-15.112c-7.705-21.17-7.639-62.386 8.774-68.36z" fill="#e0b799"/><path d="m210.766 159.538c-2.466-6.777-6.868-14.613-12.246-21.943-17.08 5.848-32.853 14.324-46.526 25.182-1.47 1.167-2.898 2.361-4.303 3.568.852 5.453 2.083 10.551 3.639 14.826 5.212 14.32 22.742 21.086 39.155 15.112 16.414-5.973 25.493-22.425 20.281-36.745z" fill="#d99a84"/><path d="m351.895 112.811c-16.412-5.974-42.956 25.557-50.661 46.727-5.212 14.32 3.868 30.771 20.28 36.745s33.943-.792 39.155-15.112c7.705-21.17 7.639-62.386-8.774-68.36z" fill="#e0b799"/><path d="m360.668 181.171c1.556-4.274 2.788-9.372 3.639-14.826-1.405-1.207-2.833-2.4-4.303-3.568-13.673-10.858-29.446-19.334-46.526-25.182-5.377 7.33-9.779 15.166-12.246 21.942-5.212 14.32 3.868 30.771 20.28 36.745 16.414 5.975 33.944-.791 39.156-15.111z" fill="#d99a84"/><path d="m146.615 174.952c-23.339-5.835-43.405-37.87-25.122-86.059 4.296-11.325-1.401-23.988-12.726-28.284-11.323-4.295-23.988 1.401-28.284 12.726-7.444 19.623-10.709 39.014-9.825 57.148l-.004.001c.011 11.462-13.645 19.564-19.025 1.831-1.924-12.804-2.898-27.875-2.898-45.225 0-12.112-9.819-21.931-21.931-21.931s-21.931 9.819-21.931 21.931c0 58.402 10.035 126.107 66.753 140.287 14.141 4.132 50.423 9.316 91.609-3.068 41.186-12.383 7.947-43.707-16.616-49.357z" fill="#f7dfb7"/><path d="m37.067 252.599c-23.818-15.126-34.727-37.197-36.83-51.501-1.763-11.983 6.523-23.126 18.506-24.888 11.979-1.763 23.126 6.523 24.888 18.506.346 2.351 4.236 12.784 16.949 20.857 18.27 11.603 45.434 12.45 78.554 2.452 11.595-3.499 23.833 3.061 27.333 14.657 3.501 11.595-3.062 23.833-14.657 27.333-38.38 11.587-81.029 13.995-114.743-7.416z" fill="#fbf1cf"/><path d="m365.385 174.952c23.339-5.835 43.405-37.87 25.122-86.059-4.296-11.325 1.401-23.988 12.726-28.284 11.323-4.295 23.988 1.401 28.284 12.726 7.444 19.623 10.709 39.014 9.824 57.148l.004.001c-.011 11.462 13.645 19.564 19.025 1.831 1.924-12.804 2.898-27.875 2.898-45.225 0-12.112 9.819-21.931 21.931-21.931s21.931 9.819 21.931 21.931c0 58.402-10.035 126.107-66.753 140.287-14.141 4.132-50.423 9.316-91.609-3.068-41.185-12.383-7.946-43.707 16.617-49.357z" fill="#f7dfb7"/><path d="m474.933 252.599c23.818-15.126 34.727-37.197 36.83-51.501 1.763-11.983-6.523-23.126-18.506-24.888-11.979-1.763-23.126 6.523-24.888 18.506-.346 2.351-4.236 12.784-16.949 20.857-18.27 11.603-45.434 12.45-78.554 2.452-11.595-3.499-23.833 3.061-27.333 14.657-3.501 11.595 3.061 23.833 14.657 27.333 38.38 11.587 81.029 13.995 114.743-7.416z" fill="#fbf1cf"/><path d="m136.095 254.31c0 45.549 39.418 101.13 69.873 131.585h100.064c30.455-30.455 69.873-86.036 69.873-131.585 0-52.588-53.683-95.219-119.905-95.219s-119.905 42.631-119.905 95.219z" fill="#e0b799"/><path d="m206.939 167.403c-41.76 14.89-70.844 48.2-70.844 86.906 0 45.549 39.418 101.13 69.873 131.585h60.957c-101.661-64.703-77.003-179.147-59.986-218.491z" fill="#d99a84"/><path d="m256 452.822c145.287 0 122.997-82.382 87.255-116.316-35.742-33.933-30.342-82.196-87.255-82.196s-51.513 48.263-87.255 82.197c-35.742 33.933-58.032 116.315 87.255 116.315z" fill="#e7c7af"/><ellipse cx="206.592" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><ellipse cx="305.408" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><g><g fill="#fff"><ellipse cx="174.042" cy="266.152" rx="30.241" ry="24.082"/><ellipse cx="337.958" cy="266.152" rx="30.241" ry="24.082"/></g><g fill="#4e5660"><path d="m191.666 250.47c-4.142 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.358-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/><path d="m320.333 250.47c-4.143 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.357-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/></g></g></g></svg>
</div>
<div style="display:inline-block;">
<svg height="48" width="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m160.105 112.811c16.412-5.974 42.956 25.557 50.661 46.727 5.212 14.32-3.868 30.771-20.28 36.745s-33.943-.792-39.155-15.112c-7.705-21.17-7.639-62.386 8.774-68.36z" fill="#e0b799"/><path d="m210.766 159.538c-2.466-6.777-6.868-14.613-12.246-21.943-17.08 5.848-32.853 14.324-46.526 25.182-1.47 1.167-2.898 2.361-4.303 3.568.852 5.453 2.083 10.551 3.639 14.826 5.212 14.32 22.742 21.086 39.155 15.112 16.414-5.973 25.493-22.425 20.281-36.745z" fill="#d99a84"/><path d="m351.895 112.811c-16.412-5.974-42.956 25.557-50.661 46.727-5.212 14.32 3.868 30.771 20.28 36.745s33.943-.792 39.155-15.112c7.705-21.17 7.639-62.386-8.774-68.36z" fill="#e0b799"/><path d="m360.668 181.171c1.556-4.274 2.788-9.372 3.639-14.826-1.405-1.207-2.833-2.4-4.303-3.568-13.673-10.858-29.446-19.334-46.526-25.182-5.377 7.33-9.779 15.166-12.246 21.942-5.212 14.32 3.868 30.771 20.28 36.745 16.414 5.975 33.944-.791 39.156-15.111z" fill="#d99a84"/><path d="m146.615 174.952c-23.339-5.835-43.405-37.87-25.122-86.059 4.296-11.325-1.401-23.988-12.726-28.284-11.323-4.295-23.988 1.401-28.284 12.726-7.444 19.623-10.709 39.014-9.825 57.148l-.004.001c.011 11.462-13.645 19.564-19.025 1.831-1.924-12.804-2.898-27.875-2.898-45.225 0-12.112-9.819-21.931-21.931-21.931s-21.931 9.819-21.931 21.931c0 58.402 10.035 126.107 66.753 140.287 14.141 4.132 50.423 9.316 91.609-3.068 41.186-12.383 7.947-43.707-16.616-49.357z" fill="#f7dfb7"/><path d="m37.067 252.599c-23.818-15.126-34.727-37.197-36.83-51.501-1.763-11.983 6.523-23.126 18.506-24.888 11.979-1.763 23.126 6.523 24.888 18.506.346 2.351 4.236 12.784 16.949 20.857 18.27 11.603 45.434 12.45 78.554 2.452 11.595-3.499 23.833 3.061 27.333 14.657 3.501 11.595-3.062 23.833-14.657 27.333-38.38 11.587-81.029 13.995-114.743-7.416z" fill="#fbf1cf"/><path d="m365.385 174.952c23.339-5.835 43.405-37.87 25.122-86.059-4.296-11.325 1.401-23.988 12.726-28.284 11.323-4.295 23.988 1.401 28.284 12.726 7.444 19.623 10.709 39.014 9.824 57.148l.004.001c-.011 11.462 13.645 19.564 19.025 1.831 1.924-12.804 2.898-27.875 2.898-45.225 0-12.112 9.819-21.931 21.931-21.931s21.931 9.819 21.931 21.931c0 58.402-10.035 126.107-66.753 140.287-14.141 4.132-50.423 9.316-91.609-3.068-41.185-12.383-7.946-43.707 16.617-49.357z" fill="#f7dfb7"/><path d="m474.933 252.599c23.818-15.126 34.727-37.197 36.83-51.501 1.763-11.983-6.523-23.126-18.506-24.888-11.979-1.763-23.126 6.523-24.888 18.506-.346 2.351-4.236 12.784-16.949 20.857-18.27 11.603-45.434 12.45-78.554 2.452-11.595-3.499-23.833 3.061-27.333 14.657-3.501 11.595 3.061 23.833 14.657 27.333 38.38 11.587 81.029 13.995 114.743-7.416z" fill="#fbf1cf"/><path d="m136.095 254.31c0 45.549 39.418 101.13 69.873 131.585h100.064c30.455-30.455 69.873-86.036 69.873-131.585 0-52.588-53.683-95.219-119.905-95.219s-119.905 42.631-119.905 95.219z" fill="#e0b799"/><path d="m206.939 167.403c-41.76 14.89-70.844 48.2-70.844 86.906 0 45.549 39.418 101.13 69.873 131.585h60.957c-101.661-64.703-77.003-179.147-59.986-218.491z" fill="#d99a84"/><path d="m256 452.822c145.287 0 122.997-82.382 87.255-116.316-35.742-33.933-30.342-82.196-87.255-82.196s-51.513 48.263-87.255 82.197c-35.742 33.933-58.032 116.315 87.255 116.315z" fill="#e7c7af"/><ellipse cx="206.592" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><ellipse cx="305.408" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><g><g fill="#fff"><ellipse cx="174.042" cy="266.152" rx="30.241" ry="24.082"/><ellipse cx="337.958" cy="266.152" rx="30.241" ry="24.082"/></g><g fill="#4e5660"><path d="m191.666 250.47c-4.142 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.358-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/><path d="m320.333 250.47c-4.143 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.357-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/></g></g></g></svg>
</div>
<div style="display:inline-block;">
<svg height="48" width="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m160.105 112.811c16.412-5.974 42.956 25.557 50.661 46.727 5.212 14.32-3.868 30.771-20.28 36.745s-33.943-.792-39.155-15.112c-7.705-21.17-7.639-62.386 8.774-68.36z" fill="#e0b799"/><path d="m210.766 159.538c-2.466-6.777-6.868-14.613-12.246-21.943-17.08 5.848-32.853 14.324-46.526 25.182-1.47 1.167-2.898 2.361-4.303 3.568.852 5.453 2.083 10.551 3.639 14.826 5.212 14.32 22.742 21.086 39.155 15.112 16.414-5.973 25.493-22.425 20.281-36.745z" fill="#d99a84"/><path d="m351.895 112.811c-16.412-5.974-42.956 25.557-50.661 46.727-5.212 14.32 3.868 30.771 20.28 36.745s33.943-.792 39.155-15.112c7.705-21.17 7.639-62.386-8.774-68.36z" fill="#e0b799"/><path d="m360.668 181.171c1.556-4.274 2.788-9.372 3.639-14.826-1.405-1.207-2.833-2.4-4.303-3.568-13.673-10.858-29.446-19.334-46.526-25.182-5.377 7.33-9.779 15.166-12.246 21.942-5.212 14.32 3.868 30.771 20.28 36.745 16.414 5.975 33.944-.791 39.156-15.111z" fill="#d99a84"/><path d="m146.615 174.952c-23.339-5.835-43.405-37.87-25.122-86.059 4.296-11.325-1.401-23.988-12.726-28.284-11.323-4.295-23.988 1.401-28.284 12.726-7.444 19.623-10.709 39.014-9.825 57.148l-.004.001c.011 11.462-13.645 19.564-19.025 1.831-1.924-12.804-2.898-27.875-2.898-45.225 0-12.112-9.819-21.931-21.931-21.931s-21.931 9.819-21.931 21.931c0 58.402 10.035 126.107 66.753 140.287 14.141 4.132 50.423 9.316 91.609-3.068 41.186-12.383 7.947-43.707-16.616-49.357z" fill="#f7dfb7"/><path d="m37.067 252.599c-23.818-15.126-34.727-37.197-36.83-51.501-1.763-11.983 6.523-23.126 18.506-24.888 11.979-1.763 23.126 6.523 24.888 18.506.346 2.351 4.236 12.784 16.949 20.857 18.27 11.603 45.434 12.45 78.554 2.452 11.595-3.499 23.833 3.061 27.333 14.657 3.501 11.595-3.062 23.833-14.657 27.333-38.38 11.587-81.029 13.995-114.743-7.416z" fill="#fbf1cf"/><path d="m365.385 174.952c23.339-5.835 43.405-37.87 25.122-86.059-4.296-11.325 1.401-23.988 12.726-28.284 11.323-4.295 23.988 1.401 28.284 12.726 7.444 19.623 10.709 39.014 9.824 57.148l.004.001c-.011 11.462 13.645 19.564 19.025 1.831 1.924-12.804 2.898-27.875 2.898-45.225 0-12.112 9.819-21.931 21.931-21.931s21.931 9.819 21.931 21.931c0 58.402-10.035 126.107-66.753 140.287-14.141 4.132-50.423 9.316-91.609-3.068-41.185-12.383-7.946-43.707 16.617-49.357z" fill="#f7dfb7"/><path d="m474.933 252.599c23.818-15.126 34.727-37.197 36.83-51.501 1.763-11.983-6.523-23.126-18.506-24.888-11.979-1.763-23.126 6.523-24.888 18.506-.346 2.351-4.236 12.784-16.949 20.857-18.27 11.603-45.434 12.45-78.554 2.452-11.595-3.499-23.833 3.061-27.333 14.657-3.501 11.595 3.061 23.833 14.657 27.333 38.38 11.587 81.029 13.995 114.743-7.416z" fill="#fbf1cf"/><path d="m136.095 254.31c0 45.549 39.418 101.13 69.873 131.585h100.064c30.455-30.455 69.873-86.036 69.873-131.585 0-52.588-53.683-95.219-119.905-95.219s-119.905 42.631-119.905 95.219z" fill="#e0b799"/><path d="m206.939 167.403c-41.76 14.89-70.844 48.2-70.844 86.906 0 45.549 39.418 101.13 69.873 131.585h60.957c-101.661-64.703-77.003-179.147-59.986-218.491z" fill="#d99a84"/><path d="m256 452.822c145.287 0 122.997-82.382 87.255-116.316-35.742-33.933-30.342-82.196-87.255-82.196s-51.513 48.263-87.255 82.197c-35.742 33.933-58.032 116.315 87.255 116.315z" fill="#e7c7af"/><ellipse cx="206.592" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><ellipse cx="305.408" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><g><g fill="#fff"><ellipse cx="174.042" cy="266.152" rx="30.241" ry="24.082"/><ellipse cx="337.958" cy="266.152" rx="30.241" ry="24.082"/></g><g fill="#4e5660"><path d="m191.666 250.47c-4.142 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.358-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/><path d="m320.333 250.47c-4.143 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.357-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/></g></g></g></svg>
</div>
<div style="display:inline-block;">
<svg height="48" width="48" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m160.105 112.811c16.412-5.974 42.956 25.557 50.661 46.727 5.212 14.32-3.868 30.771-20.28 36.745s-33.943-.792-39.155-15.112c-7.705-21.17-7.639-62.386 8.774-68.36z" fill="#e0b799"/><path d="m210.766 159.538c-2.466-6.777-6.868-14.613-12.246-21.943-17.08 5.848-32.853 14.324-46.526 25.182-1.47 1.167-2.898 2.361-4.303 3.568.852 5.453 2.083 10.551 3.639 14.826 5.212 14.32 22.742 21.086 39.155 15.112 16.414-5.973 25.493-22.425 20.281-36.745z" fill="#d99a84"/><path d="m351.895 112.811c-16.412-5.974-42.956 25.557-50.661 46.727-5.212 14.32 3.868 30.771 20.28 36.745s33.943-.792 39.155-15.112c7.705-21.17 7.639-62.386-8.774-68.36z" fill="#e0b799"/><path d="m360.668 181.171c1.556-4.274 2.788-9.372 3.639-14.826-1.405-1.207-2.833-2.4-4.303-3.568-13.673-10.858-29.446-19.334-46.526-25.182-5.377 7.33-9.779 15.166-12.246 21.942-5.212 14.32 3.868 30.771 20.28 36.745 16.414 5.975 33.944-.791 39.156-15.111z" fill="#d99a84"/><path d="m146.615 174.952c-23.339-5.835-43.405-37.87-25.122-86.059 4.296-11.325-1.401-23.988-12.726-28.284-11.323-4.295-23.988 1.401-28.284 12.726-7.444 19.623-10.709 39.014-9.825 57.148l-.004.001c.011 11.462-13.645 19.564-19.025 1.831-1.924-12.804-2.898-27.875-2.898-45.225 0-12.112-9.819-21.931-21.931-21.931s-21.931 9.819-21.931 21.931c0 58.402 10.035 126.107 66.753 140.287 14.141 4.132 50.423 9.316 91.609-3.068 41.186-12.383 7.947-43.707-16.616-49.357z" fill="#f7dfb7"/><path d="m37.067 252.599c-23.818-15.126-34.727-37.197-36.83-51.501-1.763-11.983 6.523-23.126 18.506-24.888 11.979-1.763 23.126 6.523 24.888 18.506.346 2.351 4.236 12.784 16.949 20.857 18.27 11.603 45.434 12.45 78.554 2.452 11.595-3.499 23.833 3.061 27.333 14.657 3.501 11.595-3.062 23.833-14.657 27.333-38.38 11.587-81.029 13.995-114.743-7.416z" fill="#fbf1cf"/><path d="m365.385 174.952c23.339-5.835 43.405-37.87 25.122-86.059-4.296-11.325 1.401-23.988 12.726-28.284 11.323-4.295 23.988 1.401 28.284 12.726 7.444 19.623 10.709 39.014 9.824 57.148l.004.001c-.011 11.462 13.645 19.564 19.025 1.831 1.924-12.804 2.898-27.875 2.898-45.225 0-12.112 9.819-21.931 21.931-21.931s21.931 9.819 21.931 21.931c0 58.402-10.035 126.107-66.753 140.287-14.141 4.132-50.423 9.316-91.609-3.068-41.185-12.383-7.946-43.707 16.617-49.357z" fill="#f7dfb7"/><path d="m474.933 252.599c23.818-15.126 34.727-37.197 36.83-51.501 1.763-11.983-6.523-23.126-18.506-24.888-11.979-1.763-23.126 6.523-24.888 18.506-.346 2.351-4.236 12.784-16.949 20.857-18.27 11.603-45.434 12.45-78.554 2.452-11.595-3.499-23.833 3.061-27.333 14.657-3.501 11.595 3.061 23.833 14.657 27.333 38.38 11.587 81.029 13.995 114.743-7.416z" fill="#fbf1cf"/><path d="m136.095 254.31c0 45.549 39.418 101.13 69.873 131.585h100.064c30.455-30.455 69.873-86.036 69.873-131.585 0-52.588-53.683-95.219-119.905-95.219s-119.905 42.631-119.905 95.219z" fill="#e0b799"/><path d="m206.939 167.403c-41.76 14.89-70.844 48.2-70.844 86.906 0 45.549 39.418 101.13 69.873 131.585h60.957c-101.661-64.703-77.003-179.147-59.986-218.491z" fill="#d99a84"/><path d="m256 452.822c145.287 0 122.997-82.382 87.255-116.316-35.742-33.933-30.342-82.196-87.255-82.196s-51.513 48.263-87.255 82.197c-35.742 33.933-58.032 116.315 87.255 116.315z" fill="#e7c7af"/><ellipse cx="206.592" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><ellipse cx="305.408" cy="379.47" fill="#4e5660" rx="18.137" ry="19.267"/><g><g fill="#fff"><ellipse cx="174.042" cy="266.152" rx="30.241" ry="24.082"/><ellipse cx="337.958" cy="266.152" rx="30.241" ry="24.082"/></g><g fill="#4e5660"><path d="m191.666 250.47c-4.142 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.358-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/><path d="m320.333 250.47c-4.143 0-7.5-3.358-7.5-7.5v-12.362c0-4.142 3.357-7.5 7.5-7.5s7.5 3.358 7.5 7.5v12.362c0 4.142-3.357 7.5-7.5 7.5z"/></g></g></g></svg>
</div>
</div>
<div>
<button type="button" onclick="capture()">capture</button>
</div>
</div>
</div>
</div>
<div id="tarp" style="display:none; vertical-align:top; border:1px solid #aaa;">
<img id="tar" src="" />
</div>
<script>
function capture(){
wsemi.html2pic(document.querySelector('#src'), { scale: 3 })
.then(function(b64){
document.querySelector('#tarp').style.display="inline-block"
document.querySelector('#tar').setAttribute('src',b64)
})
.catch(function(err){
console.log(err)
})
}
</script>
</body>
</html>