gpt4 book ai didi

javascript - 将 html 转换为图像,并保存?(使用 html2canvas.js)

转载 作者:太空宇宙 更新时间:2023-11-04 16:12:39 24 4
gpt4 key购买 nike

我有一个大问题,请帮我 !这是我的代码:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>

<script type="text/javascript">
$(function() {
$("#show_button").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
$("<img/>", {
id: "image",
src: canvas.toDataURL("image/png"),
width: '95%',
height: '95%'
}).appendTo($("#show_img").empty());
}
});
});
});
</script>
</head>

<body>
<h1>test</h1>
<button id="show_button">Show Image</button>

//this is a problem
<a href="" download="dl.jpg">download</a>
<div id="show_img"></div>
</body>

</html>

如果我的观点是正确的。要保存图像,下载需要正确的文件路径和文件名。我使用 html2canvas.js,将目标转换为图像。但是当我想保存图像时,我不知道正确的文件路径和文件名。(因为图像是动态文件,而不是静态文件?)我怎样才能得到正确的值(value)来保存这张图片?谢谢!

最佳答案

好的,我发现 canvas2image.js 可以满足您对这个功能的需求

downloadPNG = function () {
html2canvas(document.body, {
onrendered: function (canvas) {
Canvas2Image.saveAsPNG(canvas);
}
});
}

这是一个fiddle

http://jsfiddle.net/link2twenty/w8Lk3znf/

关于javascript - 将 html 转换为图像,并保存?(使用 html2canvas.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34091760/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com