浅谈两种前端截图方式:Canvas截图 vs SVG截图

背景

如今很多网站都引入截图功能,可用于问题反馈内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。

  • Canvas截图html2canvas
  • SVG截图rasterizehtml

原理

首先来谈下两种前端截图方式的原理,虽然实现方式不太一致,但是核心思想是相同的。

html2canvas为代表的Canvas截图,通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOMCanvasImage

rasterizehtml为代表的SVG截图,通过遍历DOM克隆一份副本,利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中,将此SVG在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOMSVG的ForeignObjectCanvasImage

两种前端截图方式最后都是通过把DOM绘制到Canvas,再通过Canvas输出图片

限制

虽然两种前端截图方式都有这两个封装得比较完善的第三方库html2canvasrasterizehtml,但是由于在转换过程中存在一些自身的局限性,所以也导致截图可能出现一些不完美的问题。

Canvas截图的限制性

  • 无法渲染跨域资源(支持同域)
  • 无法渲染iFrameFlash内容(支持SVG)

SVG截图的限制性

  • 无法渲染跨域资源(支持同域)
  • 无法渲染如lazyload等通过JS加载的资源
  • 无法渲染内联background-image或JS操作background-image

方案

不多废话,直接上两种前端截图方式的代码,小伙伴们可根据项目需求自行优化代码和增加功能哈。

准备

<div id="screenshot">Hello World</div>
<button id="save-btn">保存</button>
// 渲染图片
function Render(src, width, height, cb) {
    const img = new Image();
    img.src = src;
    img.width = width;
    img.height = height;
    img.crossOrigin = ""; // 图像跨域时配置
    cb && cb(img);
}

// 下载图片
function Download(url, name) {
    const target = document.createElement("a");
    target.href = url;
    target.download = name;
    const event = document.createEvent("MouseEvents");
    event.initEvent("click", true, true);
    target.dispatchEvent(event);
}

Canvas截图

import Html2canvas from "html2canvas";

const btn = document.getElementById("save-btn");
btn.addEventListener("click", () => {
    const screenshot = document.getElementById("screenshot");
    // allowTaint: true, // 不能与useCORS共用
    const opts = {
        logging: false,
        scale: 2,
        useCORS: true
    };
    Html2canvas(screenshot, opts).then(res => {
        const { height, width } = res;
        const base64 = res.toDataURL("image/png", 1);
        Render(base64, width, height, img => {
            document.body.appendChild(img);
            Download(base64, "screenshot.png");
        });
    }, err => alert("截图失败,请重新尝试"));
});

SVG截图

import Rasterizehtml from "rasterizehtml";

const btn = document.getElementById("save-btn");
btn.addEventListener("click", () => {
    // drawURL()加载的URL必须是同域名URL或支持跨域的URL
    // 下面的URL是随便写的,记得换成同域名URL或支持跨域的URL
    const url = "https://www.baidu.com";
    const canvas = document.createElement("canvas");
    const opts = {
        executeJs: true,
        height: screen.height,
        width: screen.width
    };
    Rasterizehtml.drawURL(url, canvas, opts).then(res => {
        const base64 = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(res.svg)));
        Render(base64, opts.width, opts.height, img => {
            document.body.appendChild(img);
            Download(base64, "screenshot.png");
        });
    }, err => alert("截图失败,请重新尝试"));
});

另外还有几点需要注意一下:

  • 使用Canvas截图兼容低版本浏览器时,不能使用CSS3属性带有前缀的属性
  • 使用SVG截图可获取同域<iframe>内容进行渲染
  • 截图不能包含跨域获取的内容,否则不会渲染跨域内容

总结

浅谈两种前端截图方式就到此为止啦,相信小伙伴们对前端截图也有一个比较清晰的概念了,可结合自身项目尝试一下两种前端截图方式,探究下其相同点和不同点。如果对其截图原理感兴趣,可剖析下html2canvasrasterizehtml的源码,相信你会有意外的收获喔!

原文链接:https://www.cnblogs.com/onesea/p/17327656.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈两种前端截图方式:Canvas截图 vs SVG截图 - Python技术站

(0)
上一篇 2023年4月17日
下一篇 2023年4月18日

相关文章

  • 如何通过JS实现转码与解码

    下面是如何通过JS实现转码与解码的完整攻略: 一、什么是转码与解码? 在计算机领域,转码与解码是非常重要的概念。转码是将一种编码方式的数据转换为另一种编码方式的数据,而解码则是将编码后的数据转换为原始数据。在日常编程中,常常会用到转码与解码,比如在处理网络传输、数据存储、文本处理等方面。 二、在JS中如何进行转码与解码? 在JS中,可以通过内置的一些方法来实…

    JavaScript 2023年5月20日
    00
  • js根据后缀判断文件文件类型的代码

    让我们来详细讲解一下“js根据后缀判断文件类型的代码”的完整攻略。 前置知识 在开始之前,我们需要了解一些前置知识: 如何通过 JavaScript 获取文件的后缀名。 如何根据后缀名判断文件类型。 获取文件后缀名 要获取文件的后缀名,我们可以使用 JavaScript 的 split() 方法。例如,对于一个文件名为 example.jpg 的文件,可以使…

    JavaScript 2023年5月27日
    00
  • JavaScript对IE操作的经典代码(推荐)

    下面是关于“JavaScript对IE操作的经典代码(推荐)”的完整攻略。 1.什么是JavaScript对IE的操作? 在IE浏览器中,有一些功能和方法是IE浏览器所特有的,而这些方法和功能在其他浏览器上可能不支持或者支持的方式不同。JavaScript对IE的操作,就是指通过JavaScript在IE浏览器中调用这些特有的方法和功能,以实现一些特殊的需求…

    JavaScript 2023年5月18日
    00
  • javascript回调函数详解

    JavaScript回调函数详解 在 JavaScript 中,函数可以被传递给另外一个函数作为参数,这个被传递的函数就被称为“回调函数”。回调函数可以在被传递的函数执行完毕后被调用,用来处理结果数据或实现其他功能。回调函数是 JavaScript 中常用的编程技巧之一,它们可以简化代码结构、提高代码可读性和可维护性。 回调函数的使用 在 JavaScrip…

    JavaScript 2023年5月27日
    00
  • layui表格数据复选框回显设置方法

    以下是关于“layui表格数据复选框回显设置方法”的详细攻略。 标题 一、背景介绍 在实际开发中,我们经常会使用到Layui表格组件,而其中一个常见的问题就是如何设置数据复选框的回显状态。本文将会介绍如何使用Layui的内置函数和自定义函数来实现该功能。 二、使用内置函数进行复选框回显设置 Layui表格组件内置了checkStatus函数,该函数可以获取已…

    JavaScript 2023年6月10日
    00
  • JS一个简单的注册页面实例

    下面为大家详细说明“JS一个简单的注册页面实例”的完整攻略。 1. 准备工作 在实现一个简单的注册页面之前,我们需要先准备好以下工作: HTML布局代码:包括表单、输入框、按钮等。 CSS样式表:为页面元素添加样式和布局。 JS代码:实现页面交互,如表单验证等。 2. HTML布局代码 首先使用 HTML 建立一个空白网页,然后在 body 标签内添加以下代…

    JavaScript 2023年6月10日
    00
  • requestAnimationFrame使用示例详解

    下面是关于“requestAnimationFrame使用示例详解”的完整攻略: 什么是requestAnimationFrame requestAnimationFrame 是一个在浏览器中运行的API,它能够优化动画和其它需要更新的内容的渲染。使用它可以让浏览器去控制动画的帧率,并在当前屏幕刷新前执行动画,从而避免了一些性能下降和卡顿的情况。 类比 se…

    JavaScript 2023年6月11日
    00
  • javascript按钮禁用和启用的效果实例代码

    下面我将详细讲解“JavaScript按钮禁用和启用的效果实例代码”的完整攻略。 禁用按钮 原理:使用disabled属性禁用按钮。 示例代码 HTML代码: <button id="myBtn">提交</button> JavaScript代码: var myBtn = document.getElementBy…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部