主页 / 问题 / 1137624
Accepted
WGPavell
Asked:2020-06-07 16:09:47 +0000 UTC2020-06-07 16:09:47 +0000 UTC

JavaScript：截取页面或部分页面

  • 772

有必要创造一个像谷歌那样的机会 - 发送反馈，特别是带有页面截图的部分。尝试使用 html2canvas 和 dom-to-image，因为它们不适用于 svg（我在我的应用程序中使用 fontawesome）。如果没有 svg，它也不会在任何地方创建屏幕截图，它经常会抛出Uncaught (in promise)错误。

Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}
isTrusted: true
type: "error"
target: null
currentTarget: null
eventPhase: 0
bubbles: false
cancelable: false
defaultPrevented: false
composed: false
timeStamp: 8231.119999999919
srcElement: null
returnValue: true
cancelBubble: false
path: [img]

以后我一般都不需要标签了，比如谷歌，只要对页面进行截图+根据用户的要求裁剪图片就够了。在我的情况下可以做什么？

以防万一，创建屏幕截图的一段代码，但它不太可能说什么，我仍在探索可能性：

$("#bugReportTakeScreenshot").click(function() {
    domtoimage.toPng($(".wrapper")[0]).then(function (dataUrl) {
        let image = new Image();
        image.src = dataUrl;
        $("#bugReportModalBlock").append(image);
    });
});
javascript

1 个回答

  1. Best Answer

    我弄清楚了问题所在，页面上有 svg 元素，除了 fontawesome 本身（包本身也翻译成常规字体，放弃 svg），即来自引导程序（例如，自定义选择的图标，如以及轮播滚动图标）。在插件中，我选择了 dom-to-image，因为使用 html2canvas，页面变成了某种绞肉机。在同一个 dom-to-image 中，我过滤掉了剩余的 svg 元素，在屏幕截图生成期间隐藏它们。我使用cropperjs 来裁剪图像。此外，dom-to-image 不喜欢没有来源的图像标签。一般来说，这是这样发生的：

    let restrictedNodes = [];
domtoimage.toJpeg($('.wrapper')[0], {
    quality: 0.95,
    bgcolor: $("body").css('background-color'),
    filter: function (node) {
        let $node = $(node);
        if ($node.hasClass('custom-select')) {
            $node.css('background-image', 'none');
            restrictedNodes.push($(node));
        } else if ($node.prop('tagName') == 'IMG' && ($node.attr('src') == undefined || $node.attr('src') == '')) {
            return false;
        } else if ($node.hasClass('carousel-control-prev') || $node.hasClass('carousel-control-next')) {
            return false;
        }
        return true;
    }
}).then(function(dataUrl) {
    ...
    for (let node of restrictedNodes) {
        node.css('background-image', '');
    }
}
    • 1

相关问题