Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Why not make yau.html eaiser to use? #1

Open
TakunMaii opened this issue Jul 5, 2024 · 0 comments
Open

Why not make yau.html eaiser to use? #1

TakunMaii opened this issue Jul 5, 2024 · 0 comments

Comments

@TakunMaii
Copy link

yau生成器很草，但是生成之后需要手动截图不是很方便。
希望添加一个功能实现一键渲染到图片并下载。下面是我的实现思路：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
	// capture, transform to image and download-btn
	document.getElementById('download-btn').addEventListener('click', function () {
		html2canvas(document.getElementById('capture-area')).then(function (canvas) {
			let link = document.createElement('a');
			link.href = canvas.toDataURL('image/png');
			link.download = 'yau-wechat.png';
			link.click();
		});
	});
</script>

然后将对应的<div>设置为#capture-area，添加一个#download-btn就行。
完整代码如下，可以直接替换（仓库有太多无关内容不想fork就不pl了）。

<html>
<head><meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="wxapp.css">
</head>
<body class="phone-bg" style="background-color:#F1F1F1;"><table><tr><td>
	用「国<sub>（而不是国）</sub>內<sub>（而不是内）</sub>」是故意的，是为了表明是假的。另诚招前端工程师。</td><tr><tr><td><input value="输入文本" id="inputtext"/><button onclick="document.getElementById('text').innerHTML=document.getElementById('inputtext').value;">生成</button>
	<button id="download-btn">下载</button></td></tr>
	<tr><td>
<div class="wechat-content" id="capture-area">
<div class="wechat-dialog">
	<div class="wechat-dialog-face"><img src="data:image/jpeg;base64,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"></div>
	<table><tr><td><div class="wechat-username">丘成桐（国內）</div></td></tr><tr><td><div class="wechat-dialog-text" id="text">米家子弟，必須尋原神樂處，拓萬古星穹！</div></td></tr></table></div>
</div></td></tr></table>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script>
		// capture, transform to image and download-btn
		document.getElementById('download-btn').addEventListener('click', function () {
			html2canvas(document.getElementById('capture-area')).then(function (canvas) {
				let link = document.createElement('a');
				link.href = canvas.toDataURL('image/png');
				link.download = 'yau-wechat.png';
				link.click();
			});
		});
	</script>
</body>
</html>

望采纳。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TakunMaii