浅谈两种前端截图方式: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日

相关文章

  • 如何在JavaScript中比较日期详解

    当我们需要在JavaScript中比较日期时,需要注意的是,日期是一个非常复杂的概念。我们必须要有一个清晰的日期表示,并要知道如何比较不同的日期。 为了在JavaScript中比较日期,我们可以通过以下步骤来实现: 1. 创建日期对象 首先,我们需要创建一个日期对象。有几种方法可以创建日期对象。其中之一是使用JavaScript的Date()构造函数来创建日…

    JavaScript 2023年5月27日
    00
  • 一步步教你用js简单实现新年倒计时

    下面是“一步步教你用js简单实现新年倒计时”的完整攻略,内容包含以下几个步骤: 1. 创建HTML页面结构 首先,在HTML页面中创建元素用于展示倒计时的时间。可以创建以下几个元素: 一个用于显示天数的<span>元素,例如<span id=”days”></span>; 一个用于显示小时数的<span>元素,…

    JavaScript 2023年6月11日
    00
  • js实现各种复制到剪贴板的方法(分享)

    下面是js实现各种复制到剪贴板的方法的攻略: 一、前置知识 为了实现复制到剪贴板的功能,必须要掌握以下前置知识: Clipboard API:一种新的Web API,提供了操作剪贴板的标准接口,并且被主流浏览器所支持。 execCommand()方法:一种旧的Web API,已经被废弃,但是在Clipboard API出现之前是实现复制到剪贴板的常用方法。 …

    JavaScript 2023年6月11日
    00
  • 详解在Javascript中进行面向切面编程

    下面我将详细讲解在Javascript中进行面向切面编程的完整攻略。 什么是面向切面编程 在介绍如何在Javascript中进行面向切面编程之前,我们先来了解一下什么是面向切面编程(Aspect-Oriented Programming,简称AOP)。 AOP是一种编程思想,它可以对横跨多个模块的代码进行集中式管理。在AOP中,我们可以通过切面来描述一个横跨…

    JavaScript 2023年5月18日
    00
  • 详解操作cookie的原生方法cookieStore

    操作cookie是前端开发中经常会涉及到的技能之一。cookieStore是一个原生的JavaScript对象,它提供了一些方法来操作cookie。本攻略将详解cookieStore的使用方法。 获取cookie 使用cookieStore的get方法可以获取指定的cookie值。示例如下: const cookieValue = cookieStore.g…

    JavaScript 2023年6月11日
    00
  • JS模拟面向对象全解(一、类型及传递)

    JS模拟面向对象全解(一、类型及传递)是一篇介绍JavaScript中模拟实现面向对象编程的文章。文章主要分为四个部分:类型、传递、多态和继承。在这里,我将详细讲解第一部分的完整攻略。 标题 首先,文章需要有一个清晰的标题,以便读者快速了解文章的主题。例如,根据本篇文章,“JS模拟面向对象全解(一、类型及传递)”就是一个恰当的标题。 类型 在JavaScri…

    JavaScript 2023年5月27日
    00
  • PHP如何读取由JavaScript设置的Cookie

    当 JavaScript 在客户端设置了 Cookie 后,PHP 服务端需通过 $_COOKIE 超全局变量来访问它。 要读取使用 JavaScript 设置的 Cookie,可以遵循以下步骤: 在 JavaScript 端通过 document.cookie 设置 Cookie。 在 PHP 端使用 $_COOKIE 超全局变量读取 Cookie 值。 …

    JavaScript 2023年6月11日
    00
  • javascript获取dom的下一个节点方法

    当我们需要获取一个DOM元素的下一个兄弟节点时,有以下两个方法: 方法一:使用nextSibling属性 DOM节点对象拥有一个nextSibling属性,该属性用于获取当前节点的下一个兄弟节点。需要注意的是,这个属性获取到的兄弟节点可能是文本节点、注释节点等。 // 获取 id 为 "test" 的元素的下一个兄弟节点 var test…

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