Fatal编程技术网
  • javascript/
  • Javascript 在不丢失样式的情况下生成并下载网页截图

Javascript 在不丢失样式的情况下生成并下载网页截图

javascript jquery html canvas

Javascript 在不丢失样式的情况下生成并下载网页截图,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我想在不丢失样式的情况下生成和下载网页截图。我有一个网页。在那个网页上我有一个下载按钮。当用户单击下载按钮时，整个页面的屏幕截图需要作为图像下载到用户计算机中。我该怎么做 请检查我的密码 Index.html <html> <body> <link href="style.css" rel="stylesheet"> <h1>Scrrenshot</h1> <form class="cf"> <div cla

我想在不丢失样式的情况下生成和下载网页截图。我有一个网页。在那个网页上我有一个下载按钮。当用户单击下载按钮时，整个页面的屏幕截图需要作为图像下载到用户计算机中。我该怎么做

请检查我的密码

Index.html

<html>
 <body>
 <link href="style.css" rel="stylesheet">
 <h1>Scrrenshot</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>  
  <input type="submit" value="Submit" id="input-submit">
</form>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

</body>



<script>
(function (exports) {
    function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
            return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype
        || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
            attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function (el, i) {
            var attr = el.getAttribute(attrName);
            if (!attr) {
                return;
            }
            var absURL = /^(https?|data):/i.test(attr);
            if (absURL) {
                return el;
            } else {
                return el;
            }
        });
        return nodeList;
    }

    function screenshotPage() {
        urlsToAbsolute(document.images);
        urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
        var screenshot = document.documentElement.cloneNode(true);
        var b = document.createElement('base');
        b.href = document.location.protocol + '//' + location.host;
        var head = screenshot.querySelector('head');
        head.insertBefore(b, head.firstChild);
        screenshot.style.pointerEvents = 'none';
        screenshot.style.overflow = 'hidden';
        screenshot.style.webkitUserSelect = 'none';
        screenshot.style.mozUserSelect = 'none';
        screenshot.style.msUserSelect = 'none';
        screenshot.style.oUserSelect = 'none';
        screenshot.style.userSelect = 'none';
        screenshot.dataset.scrollX = window.scrollX;
        screenshot.dataset.scrollY = window.scrollY;
        var script = document.createElement('script');
        script.textContent = '(' + addOnPageLoad_.toString() + ')();';
        screenshot.querySelector('body').appendChild(script);
        var blob = new Blob([screenshot.outerHTML], {
            type: 'text/html'
        });
        return blob;
    }

    function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function (e) {
            var scrollX = document.documentElement.dataset.scrollX || 0;
            var scrollY = document.documentElement.dataset.scrollY || 0;
            window.scrollTo(scrollX, scrollY);
        });
    }

    function generate() {
        window.URL = window.URL || window.webkitURL;
        window.open(window.URL.createObjectURL(screenshotPage()));
    }
    exports.screenshotPage = screenshotPage;
    exports.generate = generate;
})(window);

</script>

</html>
为此，我使用了方法[，这里生成了屏幕截图，但没有样式，也没有下载。请提供帮助，是否有jQuery库可用于此目的？

此选项很少 要么用这个

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>


下载按钮
点击图片！可以下载
或者你可以用摩德尼

或者这可能管用

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
也请参考此链接
[1]

您可以使用以下JavaScript库实现这一点

  • （用于拍摄网页截图）
  • （用于以图像形式下载屏幕截图）
ᴅᴇᴍᴏ

（函数（导出）{
函数urlsToAbsolute（节点列表）{
如果（！节点列表长度）{
返回[]；
}
var attrName='href'；
if（nodeList[0]。uuu proto_uuu==HTMLImageElement.prototype | | nodeList[0]。uu proto_u==HTMLScriptElement.prototype）{
attrName='src'；
}
nodeList=[].map.call（nodeList，function（el，i）{
var attr=el.getAttribute（attrName）；
如果（！attr）{
返回；
}
var absURL=/^（https？|数据）：/i.test（attr）；
if（absURL）{
返回el；
}否则{
返回el；
}
});
返回节点列表；
}
函数screenshotPage（）{
var wrapper=document.getElementById（'wrapper'）；
html2canvas（包装器{
onrendered：函数（画布）{
canvas.toBlob（函数（blob）{
saveAs（blob，'myScreenshot.png'）；
});
}
});
}
函数addOnPageLoad_u382;（）{
window.addEventListener（'DOMContentLoaded'，函数（e）{
var scrollX=document.documentElement.dataset.scrollX | | 0；
var scrollY=document.documentElement.dataset.scrollY | | 0；
scrollTo（scrollX，scrollY）；
});
}
函数生成（）{
屏幕快照页（）；
}
exports.screenshotPage=屏幕快照页面；
exports.generate=generate；
})（窗口）；
@导入url(https://fonts.googleapis.com/css?family=Merriweather);
$red:#e74c3c；
*,
*：之前，
*：之后{
@包括框尺寸（边框框）；
}
html，
身体{
背景#f1f1；
字体系列：“Merriweather”，无衬线；
填充：1em；
}
h1{
文本对齐：居中；
颜色：#a8a8a8；
@包括文本阴影（1px 1px 0 rgba（白色，1））；
}
形式{
边框：2件纯蓝；
保证金：20px自动；
最大宽度：600px；
填充物：5px；
文本对齐：居中；
}
输入，
文本区{
边界：0；
大纲：0；
填充：1em；
@包括边界半径（8px）；
显示：块；
宽度：100%；
边缘顶部：1米；
字体系列：“Merriweather”，无衬线；
@包括方框阴影（0 1px 1px rgba（黑色，0.1））；
调整大小：无；
&：焦点{
@包括方框阴影（0像素2像素rgba（$red，1）！重要）；
}
}
#输入提交{
颜色：白色；
背景：红色；
光标：指针；
&：悬停{
@包括方框阴影（0 1px 1px 1px rgba（#aaa，0.6））；
}
}
文本区{
高度：126px；
}
}
.一半{
浮动：左；
宽度：48%；
边缘底部：1米；
}
.对{
宽度：50%；
}
.左{
保证金权利：2%；
}
@介质（最大宽度：480px）{
.一半{
宽度：100%；
浮动：无；
页边距底部：0；
}
}
/*Clearfix*/
.cf：之前，
.cf：之后{
内容：“；
/* 1 */
显示：表格；
/* 2 */
}
.cf：之后{
明确：两者皆有；
}
.half.left.cf>输入{
保证金：5px；
}

斯克伦肖特
我发现dom to image比html2canvas做得好得多。请参见以下问题和答案：

如果您想下载图像，您需要将其与（此处已提到）结合使用，如果您想下载包含多个客户端生成的图像文件的zip，请查看。

这很好！！！。它正在工作。朋友，我们可以提高下载图像的质量？目前图像的清晰度较低。很抱歉，此解决方案完全忽略了本文的要点。其中没有任何内容显示如何捕获创建浏览器窗口的屏幕截图并保存。 
<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>