Question

这是我用于创建图像的代码...
但是如何保存此图像。
我为此目的使用javascript，jquery和html。你也可以从这里查看这个代码演示...

<html>
<head>
<script type="text/javascript">
(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>
 </head>
 <body>
 <h1>abcdefghij</h1>
 <button>Button</button>
  <p><a href="javascript:void(0);" onClick="generate();">Generate Screenshot &raquo;</a></p>
 </body>
 </html>

请告诉我如何保存此图片...

在javascript中截取网页的屏幕截图

0 个答案: