前言

内存，作为计算机系统中存储数据和指令的关键资源，其管理效率直接影响着程序的性能和稳定性。在JavaScript的世界里，理解内存机制并非遥不可及，每一位开发者必须面对并掌握的实用技能。无论是初涉开发的新手，还是经验丰富的老手，深入理解JavaScript的内存机制都是通往更高层次编程能力的必经之路。

语言类型

静态语言

静态语言是指在编译时变量的数据类型就已经确定的语言，比如java定义一个整数类型需要先用int去定义一个变量。这类语言在编写程序时，要求开发者明确地声明变量的类型，并且在程序的整个生命周期内，该变量的类型都不能改变。换句话说，静态语言的类型检查是在编译阶段完成的，而不是在运行时，常见的静态语言包括Java、C++、C#、Go等。

动态语言

动态语言（Dynamic Language），也称为动态编程语言或动态类型语言，与静态语言相反，是指在程序运行时可以改变其结构的语言。这种改变可能包括引进新的函数、删除已有的函数，或者在运行时确定变量的类型等。动态语言的特点使得它们通常具有更高的灵活性和表达能力。常见的动态语言有我们学的JavaScript，还有Python,PHP等。

弱类型语言

弱类型语言是指变量的类型检查和转换方式相对宽松的一种编程语言。在弱类型语言中，变量可以在不明确声明类型的情况下直接使用，并且在运行时可以自动改变类型，或者可以在不同类型之间自由进行操作和转换，常见的弱类型语言包括JavaScript、Python等。

强类型语言

强类型语言（Strongly Typed Language）是一种在编译时期就进行类型检查的编程语言。这类语言要求变量在使用前必须明确声明其类型，并且在使用过程中，变量的类型必须保持一致，不能随意更改，常见的强类型语言包括Java、C++、C#、Go等。

数据类型

在每种语言里面都会有一个方法去查看数据的类型，js也不例外，我们可以用typeof去查看一个数据的类型，那我们来看看js中所有的数据类型吧

let a = 1

// console.log(typeof a);  //Number

a = 'hello'

// console.log(typeof a);  //String

a = true

// console.log(typeof a);  //boolean

a = null

// console.log(typeof a);  //object

a = undefined

// console.log(typeof a);  //undefined

a = Symbol(1)

// console.log(typeof a);  //symbol

a = 123n

// console.log(typeof a);  //bigint

a = []

// console.log(typeof a);  // object

a = {}

// console.log(typeof a);  //object

a = function () {}

// console.log(typeof a);  // function

我们可以看到所有判断类型的结果，大部分还正常，可是数组和null怎么也被判断成了object类型呢？

那我们要来了解一下typeof的判断原理，怎么给a判断出来它的数据类型的呢，其实是通过转换为计算机能看懂的二进制，然后通过二进制的数据进行的分析，所有的引用类型转换成二进制前三位一定是零，然后数组是引用类型，而typeof判断时如果前三位是零，那么就无脑认为它是object类型，但是函数是一个特例，在js中函数是一个对象，它做了一些特殊操作，所以能够判断出来，但是null是原始数据类型，为什么也能被判断为object类型呢，因为null在被读取成二进制时，它会被读取为全是零。而这个不是编程语言能够决定的，在计算机创建出来时就是这样设定的，因此这是一个bug，在设计这门语言的的bug,这个bug如果要修复并不困难，但是一旦修复，所有用js语言开发的项目都需要修复，影响太大，因此这个bug就被默认为js语言里面的规则。

内存空间

内存空间的分布

在v8引擎执行你写的代码时，会占用一部分的运行空间，而执行时占用的内存空间在v8的视角里会被分布成这个样子的

代码空间是专门存储你所写的代码，栈空间就是我们之前讲过的调用栈juejin.cn/post/743706…

用来存储函数被调用时，它的执行上下文，维护函数的调用关系，调用栈被分布的空间是比较小的。

堆空间（Heap Space）是内存管理的一个重要部分，它用于存储动态分配的对象和数据结构。

栈和堆之间的关系

让我们来看看栈和堆之间的关系

function foo() {

    var a = 1

    var b = a

    var c = {name: '熊总'}

    var d = c

  }

  foo()

此时foo函数已经完成编译，且已经执行到了b=a这一行，然后将一个对象赋值给c的时候，并不会直接把这个对象存储在函数的执行上下文里面，而是会在旁边在创建一个堆空间，将对象存储在堆空间里面，而这个c存储的就是对象在堆空间的地址值

然后在执行将c的值赋给d其实就是将对象的地址值赋值给了d，因此c和d的地址值指向的是同一个对象，并没有创建出一个新的对象，如果这个对象发生改变，那么c和d所代表的对象都会发生改变。

那为什么原始数据类型可以直接存储在栈当中，而引用数据类型却要存储在堆空间里面，因为原始类型数据所占的空间小，而引用数据类型所占的空间较大，比如一个对象，它可以有无数个属性，而原始类型，它就只有一个固定的值，所占内存不大，而栈被分布的空间比较小，堆被分布的空间比较大，因此原始数据类型可以直接存储在栈当中，而引用数据类型要存储在堆当中。

栈设计为什么这么小

首先我们要明白栈是用来维护函数的调用关系，而如果将栈设计的很大，那么程序员就可以写很长作用域链，并且不考虑代码的执行效率，写出不断嵌套的屎山代码。举个例子，栈就好比在你身上的空间，比如你的衣服裤子口袋，而堆就相当于一个分层的柜子，你把衣服上的口袋设计的很大，不要柜子，把你的东西全部装在口袋里面，首先看起来就十分丑陋，其次，你如果想将你想要的东西拿出来就要在口袋里翻来覆去的找，那样的效率是很低的

成果检验

function fn(person) {

    person.age = 19

    person = {

      name: '庆玲',

      age: 19

    }

    return person

  }

  const p1 = {

    name: '凤如',

    age: 18

  }

  const p2 = fn(p1)

  

  console.log(p1); 

  console.log(p2); 

请分析上面的代码中的p1和p2的输出结果

我们创建全局上下文进行编译执行，然后对函数fn进行编译，编译过程中形参和实参要进行统一，接下来，我们要开始执行函数fn了，首先它将p1所指向的对象age修改为了19，然后再函数中它将p1的地址值修改指向为了新对象，并将新对象返回，然后在全局接着执行，将返回的地址值赋给了p2，所以p2的值就是函数中新对象的地址值，接下来输出p1,此时函数已经执行完毕，在调用栈中被销毁了，那我们就在全局中查找，在全局中p1的指向就是#001，但是函数销毁前他将地址值为#001的对象age属性修改为19，所以p1打印出来的只有age改为了19，而p2就是返回的新对象的值，然我们看看结果是不是我们分析的那样

没错，p1的name为'凤如',age为19，p2的name为'庆玲'，age为19

最后来一道添加闭包的内存管理机制代码分析，如果不熟悉闭包的概念，可以先看看这篇文章
](juejin.cn/post/743814…)

function foo() {

    var myname = '彭于晏'

    let test1 = 1

    const test2 = 2

    var innerBar = {

      setName: function (name) {

        myname = name

      },

      getName: function () {

        console.log(test1);

        return myname

      }

    }

    return innerBar

  }

  var bar = foo()

  bar.setName('金城武')

  console.log(bar.getName());

总结

本文探讨了JavaScript的内存机制，包括语言类型（静态与动态、强类型与弱类型）、数据类型及typeof的判断原理，并解析了内存空间的分布，特别是栈空间和堆空间的作用及它们之间的关系。通过示例代码，阐述了原始数据类型和引用数据类型在内存中的存储差异，以及栈为何设计得相对较小的原因。最后，通过实际代码演示和结果分析，检验了对JavaScript内存机制的理解。本文是掌握JavaScript编程能力的关键一步，适合各层次开发者阅读。

写这篇文件，因为一条评论。

我写过识别计算器屏幕的文章，讲了它可以独立部署在App、小程序、树莓派等嵌入式设备上。有个老哥说，这都是应用多年的老技术了。

他说得没错，可能多少年前就有了。不过，实际上，一项技术不管应用了多少年，每年依然还有人花钱去做新的。

不知道八零、九零后是否还记得，零几年时的非智能手机，就已经有了手写识别这个功能。甚至它还给你配一个手写笔。

即便这项技术已经30年了。你现在去软件企业问问，如果他家的产品需要一个手写识别的功能，他是不是依然还得花钱买第三方的服务。

为啥？

这个问题非常好，值得思考。

首先，那时候的技术和现在不一样。在非AI时代，手写识别用的是模板匹配技术，是基于规则的。你写的字，它要拿去库里同模板做比对。就像是机器人客服，靠关键字回复一样。你问“房子”它知道，问“屋子”它说听不懂。而现在的手写识别是基于深度学习的，你问它house，它一样知道是住的地方。

其次，就算技术没变化，它的落地实践也是有壁垒的。这体现在两点。第一，给你一个开源项目，你不一定能用起来。第二，每个人的细分需求不一样，就算你能跑起来，也很难改动，个性化定制。

今天，我就讲解一个开源的OCR项目。以此论证我的观点。

我看到这个项目公布好几个月了，各类新闻也是来了一波又一波：《比xx更好的用OCR》《表格识别神器》《今年最火的十个开源项目》……

大家都在传播、转发，哎呀，这个东西好，好用。包括我做卷帘门的朋友都分享给我，说这个好用。但是，没有谁发一篇文章，说他真的用了，是如何用的，效果怎么样，它的原理是什么，它是如何训练的，它有什么优点，它有什么缺点，缺点是否能优化，该如何优化。今天，我就来填补一下。不然又会有人说，哎呀，这东西早就解决，零成本，多少年前就很成熟了。

这个项目的名字叫surya，是一个OCR识别项目，开源地址是 github.com/VikParuchuri/surya ，目前在github上拥有14K个star。它支持本地化部署，面对年收入低于500万美元的商用，可免费。

我在自己电脑上搭了一套，CPU就可以运行，GPU效率更高。稍微试验了下，给大家展示下功能。

一、功能展示

我拿这张图来进行试验，这是某报纸中的一篇新闻稿件。

它可以检测出图中有哪些类型的结构。比如，段落、图片、标题等。下面的图，就是将检测到的区域标记展示。

另外，区域检测还附赠一个阅读顺序的功能。所谓阅读顺序，就是你读这篇文档时，先读哪里后读哪里。比如按照从左到右，从上到下的顺序。有时候，阅读顺序也很重要，不然容易剧透。

既然是OCR，那么必定要将图像转为文字。想要转换文字，首先得知道哪些区域是文字。这个文本行检测，它也有。

检测到文字的位置，下一步就是识别文字了。下面是识别的结果。

最后，展示一下，它的表格识别。测试图片这样。

做一下表格检测，效果如下。

从识别到的数据信息看，它有4行，3列，12个单元格。

再来进行ocr内容识别。

二、算法集成

上面是它的功能。咱先不谈效果。下面我想问，它为什么能做到这些？回答完这个问题，才能更好地理解它的水平。

作者在最后列举了很多感谢，他说不借助这么多优秀的开源模型，他不可能完成这个项目。比如感谢CRAFT项目，这是一个超3k star的开源文本检测模型。

再比如它还采用了donut，这是一个利用无OCR理解文档的新方法。我们知道，想要理解文档，一般先要知道它上面写了什么，然后对文档进行分析，才能做出判断。而Donut结合多模态直接解析图像，极少处理文字，省去了全文分析的这个步骤。

看上面这张图。你问donut这张图的标题是什么？它可以正确地回答出来。这就是对文档的理解。

因此，从算法层面上，surya是借助了很多顶级的开源模型。而那些模型，也是站在巨人的肩膀上。可以说，它集成的算法是目前公开的一流水平。

我们再来说它的训练数据。他的训练数据，我们可以在 huggingface.co/vikp 上找到。

三、训练数据

比如文本区域类型检测，它的训练数据是这样的：

我们来看它的其中一组数据。image是一张图，bboxes是区域框，labels是区域类型，有文本类型，有表格类型。这些数据，是需要标注的，也就是在图片上画框，标注出区域类型。训练总量是1910张图片。不多。

比如表格的分析检测，它的训练数据是这样的：

image是一张表格图片，bboxes是单元格，rows是每一行的区域，cols是每一列的区域。把这些标记好的数据交给算法，让它学习什么样的特征的是行，什么样的是列。数据相对多一些，9680张图片。所以人家说它的表格识别很强。

对于文本行的检测，它的训练数据是这样的：

训练数据的结构组成：图片，图片中的某个区域，此区域对应的文本类型，另外还附加了一个文本内容。就拿上图选中的那条数据来说。这里面只标记了一条文本行区域。它告诉模型，这张图里面有一个类型为7的文本行，其区域是[88, 96, 865, 134]（左、上、右、下）围成的矩形，请认真学习。

最后到了，OCR识别了。

训练数据的组成还是老一套，图片，区域框，文本内容。主要是告诉模型，我的这张图里面有几个区域，这些区域是什么文本内容，请你仔细学习。另外，这里面还有一个language字段，这表示文字的语言类型。

surya自称支持90多种语言的识别。这不是胡说，因为他的训练数据里，确实有90多种语言的标注。但是，总量太少了。一共4635张图片，如果平均的话，每种语言只有50来张训练数据。

因此，其实surya对于中文的OCR识别效果不是特别好（虽然自称并肩Tesseract）。其主要原因并不是算法不好，而是中文的训练数据太少。英文26个字母，50张纸可以覆盖。但是中文几万字，很难覆盖全。而对于手写识别，surya只能说随缘，因为根本没有训练数据，识别成啥样就是啥样。

这里面训练数据最多的是表格的识别，共9700张样本。训练数据最少的是阅读顺序的检测，才126张。因此，数据量决定了它的识别效果。对于海量的训练数据，就算对强大的商业公司来说也是一个难题。而作者能够凑足这几千张数据，已然很不容易了。

最终，我可以下一个结论。对于surya，它是一流的算法开源项目，是免费的。它对于表格的分析确实很强大。但是，它的训练数据还是太少，而且主要用于识别电子版的文档（清晰、无扭曲），手写识别基本不支持。如果你想要不做改动直接平替收费的OCR，可行性不高。就算是只用表格识别，你也得有稍微专业一些的人，进行从拍照到预处理成电子版的工作。如果收费的效果都不好，你想用免费替换它，可以打消这个念头。算法是开源的，但是训练数据和训练设备的投入，总得有人出。

如果，你想要学习并调整它，或者想自己训练，那么可以接着往下看。

四、源码运行

我不会讲官方ReadMe.md文档上明明白白写着的内容。比如你需要运行pip install streamlit。或者它有这么几个参数，第一个--langs是用于指定OCR的语言。

这样的话，我很像一个复读机。

另外，既然你都想要研究它了，应该不至于按照操作都跑不起来。你去看看它的源码，我只讲关键点。

首先，下载源码。你在源码中可以看到两个文件pyproject.toml和poetry.lock。这说明surya用的是poetry作为项目管理工具。poetry既能管理依赖包，也能管理虚拟环境。

咱们最好找一个Linux环境，再安装poetry。即便你在windows下，现在也可以很简单地安装个ubuntu虚拟机。因为linux实在是可以避免很多问题。

打开liunx命令行，进入到源码根目录。先运行pip install poetry，安装poetry。再运行poetry install安装依赖环境。最后运行poetry shell进入环境，你会看到：

(surya-ocr-py3.12) root@tf:/mnt/d/surya# 

这时运行surya_gui，会启动它的web页面。正常情况下，你会看到如下的输出：

https://huggingface.co/vikp



(surya-ocr-py3.12) root@tf:/mnt/d/surya# surya_gui



  You can now view your Streamlit app in your browser.



  Local URL: http://localhost:8501

  Network URL: http://192.168.1.109:8501



gio: http://localhost:8501: Operation not supported

Loaded detection model /mnt/d/surya/vikp/surya_det3 on device cpu with dtype torch.float32

Loaded recognition model /mnt/d/surya/vikp/surya_rec2 on device cpu with dtype torch.float32

Loaded detection model /mnt/d/surya/vikp/surya_layout3 on device cpu with dtype torch.float32

Loaded reading order model /mnt/d/surya/vikp/surya_order on device cpu with dtype torch.float32

Loaded recognition model /mnt/d/surya/vikp/surya_tablerec on device cpu with dtype torch.float32

访问localhost:8501还有这样的页面：

但实际上，极有可能不正常。因为它在自动下载权重模型访问 huggingface.co 时会访问失败。这时，需要你想办法手动下载模型，然后放到一个固定的位置。

从报错信息能看到说加载不到模型。跟着代码就找到了surya/settings.py。

# Text detection

DETECTOR_MODEL_CHECKPOINT: str = "vikp/surya_det3"

DETECTOR_BENCH_DATASET_NAME: str = "vikp/doclaynet_bench"



# Text recognition

RECOGNITION_MODEL_CHECKPOINT: str = "vikp/surya_rec2"

RECOGNITION_BENCH_DATASET_NAME: str = "vikp/rec_bench"



# Layout

LAYOUT_MODEL_CHECKPOINT: str = "vikp/surya_layout3"

LAYOUT_BENCH_DATASET_NAME: str = "vikp/publaynet_bench"



# Ordering

ORDER_MODEL_CHECKPOINT: str = "vikp/surya_order"

ORDER_BENCH_DATASET_NAME: str = "vikp/order_bench"



# Table Rec

TABLE_REC_MODEL_CHECKPOINT: str = "vikp/surya_tablerec"

TABLE_REC_BENCH_DATASET_NAME: str = "vikp/fintabnet_bench"

……

这里面是它5大功能（检测、识别、类型、排序、表格）的权重模型以及训练数据集的路径配置。正常情况下，会自动下载并缓存读取。但现在我们要自己下载并手动配置。下载方式就是去 huggingface.co/vikp 上找对应的模型文件。

用哪个就下载哪个模型文件，即用什么功能就下载什么功能。其实，对于新手来说，这并不好区分。因为有些功能是相互依赖的。比如表格识别，往往需要先检测出表格区域，才能识别行列区域。实际上会走好几个模型。因此，不熟悉的时候，把MODEL_CHECKPOINT全下载就行了。

DATASET_NAME是数据集，如果你要重新训练，就下载它。不调用训练的代码，不下载也不报错。

你可以把权重文件下载到项目的根目录。然后做如下的配置：

将"vikp/surya_det3"改为os.path.join(BASE_DIR, "vikp/surya_det3")。因上面定义了BASE_DIR是项目根目录，所以这个路径没错。

后面再运行surya_gui就正常了。

访问 localhost:8501 可以上传文件进行5大功能的测试。

它会展示相应的结果。

而在控制台，也会输出操作类型和时间消耗：

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.61s/it]

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.06s/it]

Detecting bboxes: 100%|███████| 1/1 [00:02<00:00,  2.44s/it]

Recognizing tables: 100%|███████| 1/1 [00:01<00:00,  1.19s/it]

这样，你就可以研究它的源码了。你可以改一点代码，运行一下，查看变化。具体的功能模块和代码对应，官方readMe.md上有说明。不管是暴露接口能力，还是修改内部函数，或者重新训练自己的数据，都有了着手点。

五、总结

优秀的开源项目就像一个质量很好的毛坯房，相对于商业软件，它往往不具备舒适的居住条件。但是，它的底子很好，结构合理，质量精良。它想发达，需要有人去做一个精装修。但是反过来，有些商业软件去了精装修，很可能就是豆腐渣框架。

为什么说现在是数据为王的时代。从上面的论述可以发现，在一定时空内，算法是公开的，算力投钱就可以，可能就是数据难搞。有好的、大量的数据投喂，才能产生好的AI模型。

一、 背景

页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。

二、相关技术

前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：

• dom-to-image: github.com/tsayen/dom-…


• html2canvas: github.com/niklasvh/ht…

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

三、 dom-to-image

dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

（一）使用方式

首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom转svg)


• toPng (dom转png)


• toJpeg (dom转jpg)


• toBlob (dom转二进制格式)


• toPixelData (dom转原始像素值)

如需要生成一张png的页面截图，实现代码如下：

import domtoimage from "domtoimage"



const node = document.getElementById('node');

domtoimage.toPng(node,options).then((dataUrl) => {

    const img = new Image();

    img.src = dataUrl;

    document.body.appendChild(img);

})

toPng方法可传入两个参数node和options。

node为要生成截图的dom节点；options为支持的属性配置，具体如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源码代码不是很多，总共不到千行，下面就拿toPng方法做一下简单的源码解析，分析一下其实现原理，简单流程如下：

整体实现过程用到了几个函数：

• toPng（调用draw，实现canvas=>png ）


• Draw（调用toSvg，实现dom=>canvas）


• toSvg（调用cloneNode和makeSvgDataUri，实现dom=>svg）


• cloneNode（克隆处理dom和css）


• makeSvgDataUri（实现dom=>svg data:url）


• toPng

toPng函数比较简单，通过调用draw方法获取转换后的canvas，利用toDataURL转化为图片并返回。

function toPng(node, options) {

  return draw(node, options || {})

    .then((canvas) => canvas.toDataURL());

}

• draw

draw函数首先调用toSvg方法获得dom转化后的svg，然后将获取的url形式的svg处理成图片，并新建canvas节点，然后借助drawImage()方法将生成的图片放在canvas画布上。

function draw(domNode, options) {

  return toSvg(domNode, options)

  // 拿到的svg是image data URL, 进一步创建svg图片

    .then(util.makeImage)

    .then(util.delay(100))

    .then((image) => {

      // 创建canvas，在画布上绘制图像并返回

      const canvas = newCanvas(domNode);

      canvas.getContext("2d").drawImage(image, 0, 0);

      return canvas;

    });

  // 新建canvas节点，设置一些样式的options参数

  function newCanvas(domNode) {

    const canvas = document.createElement("canvas");

    canvas.width = options.width || util.width(domNode);

    canvas.height = options.height || util.height(domNode);

    if (options.bgcolor) {

      const ctx = canvas.getContext("2d");

      ctx.fillStyle = options.bgcolor;

      ctx.fillRect(0, 0, canvas.width, canvas.height);

    }

    return canvas;

  }

}

• toSvg


• toSvg函数实现从dom到svg的处理，大概步骤如下：


• 递归去克隆dom节点（调用cloneNode函数）


• 处理字体，获取所有样式，找到所有的@font-face和内联资源，解析并下载对应的资源，将资源转为dataUrl给src使用。把上面处理完的css rules放入中，并把标签加入到clone的节点中去。
  
• 处理图片，将img标签的src的url和css中backbround中的url，转为dataUrl使用。


• 获取dom节点转化的dataUrl数据（调用makeSvgDataUri函数）

function toSvg(node, options) {

  options = options || {};

  // 处理imagePlaceholder、cacheBust值

  copyOptions(options);

  return Promise.resolve(node)

    .then((node) =>

      // 递归克隆dom节点

      cloneNode(node, options.filter, true))

  // 把字体相关的csstext放入style

    .then(embedFonts)

  // clone处理图片，将图片链接转换为dataUrl

    .then(inlineImages)

  // 添加options里的style放入style

    .then(applyOptions)

    .then((clone) =>

      // node节点转化成svg

      makeSvgDataUri(clone,

        options.width || util.width(node),

        options.height || util.height(node)));

  // 处理一些options的样式

  function applyOptions(clone) {

    ...

    return clone;

  }

}

• cloneNode

cloneNode函数主要处理dom节点，内容比较多，简单总结实现如下：

• 递归clone原始的dom节点，其中, 其中如果有canvas将转为image对象。


• 处理节点的样式，通过getComputedStyle方法获取节点元素的所有CSS属性的值，并将这些样式属性插入新建的style标签上面, 同时要处理“:before，:after”这些伪元素的样式, 最后处理输入内容和svg。

function cloneNode(node, filter, root) {

  if (!root && filter && !filter(node)) return Promise.resolve();

  return Promise.resolve(node)

    .then(makeNodeCopy)

    .then((clone) => cloneChildren(node, clone, filter))

    .then((clone) => processClone(node, clone));

  function makeNodeCopy(node) {

  // 将canvas转为image对象

    if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());

    return node.cloneNode(false);

  }

  // 递归clone子节点

  function cloneChildren(original, clone, filter) {

    const children = original.childNodes;

    if (children.length === 0) return Promise.resolve(clone);

    return cloneChildrenInOrder(clone, util.asArray(children), filter)

      .then(() => clone);

    function cloneChildrenInOrder(parent, children, filter) {

      let done = Promise.resolve();

      children.forEach((child) => {

        done = done

          .then(() => cloneNode(child, filter))

          .then((childClone) => {

            if (childClone) parent.appendChild(childClone);

          });

      });

      return done;

    }

  }

  function processClone(original, clone) {

    if (!(clone instanceof Element)) return clone;

    return Promise.resolve()

      .then(cloneStyle)

      .then(clonePseudoElements)

      .then(copyUserInput)

      .then(fixSvg)

      .then(() => clone);

    // 克隆节点上的样式。

    function cloneStyle() {

       ...

    }

    // 提取伪类样式，放到css

    function clonePseudoElements() {

       ...

    }

    // 处理Input、TextArea标签

    function copyUserInput() {

       ...

    }

    // 处理svg

    function fixSvg() {

       ...

    }

  }

}

• makeSvgDataUri

首先，我们需要了解两个特性：

• SVG有一个元素，这个元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助标签，我们可以直接在SVG内部嵌入XHTML元素，举个例子：

<svg xmlns="http://www.w3.org/2000/svg">

<foreignObject width="120" height="50">

<body xmlns="http://www.w3.org/1999/xhtml">

<p>文字。</p>

</body>

</foreignObject>

</svg>

可以看到标签里面有一个设置了xmlns=“http://www.w3.org/1999/xhtml”…标签，此时标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

• XMLSerializer对象能够把一个XML文档或Node对象转化或“序列化”为未解析的XML标记的一个字符串。

基于以上特性，我们再来看一下makeSvgDataUri函数，该方法实现node节点转化为svg，就用到刚刚提到的两个重要特性。

首先将dom节点通过

XMLSerializer().serializeToString() 序列化为字符串，然后在

标签 中嵌入转换好的字符串，foreignObject 能够在 svg

内部嵌入XHTML，再将svg处理为dataUrl数据返回，具体实现如下：

function makeSvgDataUri(node, width, height) {

  return Promise.resolve(node)

    .then((node) => {

      // 将dom转换为字符串

      node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

      return new XMLSerializer().serializeToString(node);

    })

    .then(util.escapeXhtml)

    .then((xhtml) => `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>`)

  // 转化为svg

    .then((foreignObject) =>

    // 不指定xmlns命名空间是不会渲染的

      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${

        foreignObject}</svg>`)

  // 转化为data:url

    .then((svg) => `data:image/svg+xml;charset=utf-8,${svg}`);

}

四、 html2canvas

html2canvas库主要使用的是Canvas实现方式，主要过程是手动将dom重新绘制成canvas，因此，它只能正确渲染可以理解的属性，有许多CSS属性无法正确渲染。

支持的CSS属性的完整列表：

html2canvas.hertzen.com/features/

浏览器兼容性：

Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

官方文档地址：

html2canvas.hertzen.com/documentati…

（一）使用方式

// dom即是需要绘制的节点, option为一些可配置的选项

import html2canvas from 'html2canvas'

  html2canvas(dom, option).then(canvas=>{

  canvas.toDataURL()

})

常用的option配置：

全部配置文档：

html2canvas.hertzen.com/configurati…

（二）原理分析

html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

其中重点就在于将dom重新绘制成canvas的过程，该过程整体的思路是：遍历目标节点和目标节点的子节点，遍历过程中记录所有节点的结构、内容和样式，然后计算节点本身的层级关系，最后根据不同的优先级绘制到canvas画布中。

由于html2canvas的源码量比较大，可能无法像dom-to-image一样详细的分析，但还是可以大致了解一下整体的流程，首先可以看一下源码中src文件夹中的代码结构，如下图：

简单解析一下：

• index：入口文件，将dom节点渲染到一个canvas中，并返回。


• core：工具函数的封装，包括对缓存的处理函数、Context方法封装、日志模块等。


• css：对节点样式的处理，解析各种css属性和特性，进行处理。


• dom：遍历dom节点的方法，以及对各种类型dom的处理。


• render：基于clone的节点生成canvas的处理方法。

基于以上这些核心文件，我们来简单了解一下html2canvas的解析过程, 大致的流程如下:

• 构建配置项

在这一步会结合传入的options和一些defaultOptions，生成用于渲染的配置数据renderOptions。在过程中会对配置项进行分类，比如resourceOptions（资源跨域相关）、contextOptions（缓存、日志相关）、windowOptions（窗口宽高、滚动配置）、cloneOptions（对指定dom的配置）、renderOptions（render结果的相关配置，包括生成图片的各种属性）等，然后分别将各类配置项传到下接下来的步骤中。

• clone目标节点并获取样式和内容

在这一步中，会将目标节点到指定的dom解析方法中，这个过程会clone目标节点和其子节点，获取到节点的内容信息和样式信息，其中clone dom的解析方法也是比较复杂的，这里不做详细展开。获取到目标节点后，需要把克隆出来的目标节点的dom装载到一个iframe里，进行一次渲染，然后就可以获取到经过浏览器视图真实呈现的节点样式。

• 解析目标节点

目标节点的样式和内容都获取到了之后，就需要把它所承载的数据信息转化为Canvas可以使用的数据类型。在对目标节点的解析方法中，递归整个DOM树，并取得每一层节点的数据，对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容，而对于内容就包含图片、文字、视频等。在整个解析过程中，对目标节点的所有属性进行解析构造，转化成为指定的数据格式，基础数据格式可见以下代码:

class ElementContainer {

  // 所有节点上的样式经过转换计算之后的信息

  readonly styles: CSSParsedDeclaration;

  // 节点的文本节点信息, 包括文本内容和其他属性

  readonly textNodes: TextContainer[] = [];

  // 当前节点的子节点

  readonly elements: ElementContainer[] = [];

  // 当前节点的位置信息（宽/高、横/纵坐标）

  bounds: Bounds;

  flags = 0;

  ...

}

具体到不同类型的元素如图片、IFrame、SVG、input等还会extends ElementContainer拥有自己的特定数据结构，在此不详细贴出。

• 构建内部渲染器

把目标节点处理成特定的数据结构之后，就需要结合Canvas调用渲染方法了，Canvas绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层，那么这个规则是什么样的呢？这里就涉及到CSS布局相关的一些知识。

默认情况下，CSS是流式布局的，元素与元素之间不会重叠。不过有些情况下，这种流式布局会被打破，比如使用了浮动(float)和定位(position)。因此需要需要识别出哪些脱离了正常文档流的元素，并记住它们的层叠信息，以便正确地渲染它们。

那些脱离正常文档流的元素会形成一个层叠上下文。元素在浏览器中渲染时，根据W3C的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的规则，具体规则如下：

在了解了元素的渲染需要遵循这个标准后，Canvas绘制节点的时候，需要生成指定的层叠数据，就需要先计算出整个目标节点里子节点渲染时所展现的不同层级，构造出所有节点对应的层叠上下文在内部所表现出来的数据结构，具体数据结构如下:

// 当前元素

element: ElementPaint;

// z-index为负, 形成层叠上下文

negativeZIndex: StackingContext[];

// z-index为0、auto、transform或opacity, 形成层叠上下文

zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];

// 定位和z-index形成的层叠上下文

positiveZIndex: StackingContext[];

// 没有定位和float形成的层叠上下文

nonPositionedFloats: StackingContext[];

// 没有定位和内联形成的层叠上下文

nonPositionedInlineLevel: StackingContext[];

// 内联节点

inlineLevel: ElementPaint[];

// 不是内联的节点

nonInlineLevel: ElementPaint[];

基于以上数据结构，将元素子节点分类，添加到指定的数组中，解析层叠信息的方式和解析节点信息的方式类似，都是递归整棵树，收集树的每一层的信息，形成一颗包含层叠信息的层叠树。

• 绘制数据

基于上面两步构造出的数据，就可以开始调用内部的绘制方法，进行数据处理和绘制了。使用节点的层叠数据，依据浏览器渲染层叠数据的规则，将DOM元素一层一层渲染到canvas中，其中核心具体源码如下：

async renderStackContent(stack: StackingContext): Promise<void> {

  if (contains(stack.element.container.flags, FLAGS.DEBUG_RENDER)) {

  debugger;

  }

  // 1. the background and borders of the element forming the stacking context.

  await this.renderNodeBackgroundAndBorders(stack.element);

  // 2. the child stacking contexts with negative stack levels (most negative first).

  for (const child of stack.negativeZIndex) {

  await this.renderStack(child);

  }

  // 3. For all its in-flow, non-positioned, block-level descendants in tree order:

  await this.renderNodeContent(stack.element);

  for (const child of stack.nonInlineLevel) {

  await this.renderNode(child);

  }

  // 4. All non-positioned floating descendants, in tree order. For each one of these,

  // treat the element as if it created a new stacking context, but any positioned descendants and descendants

  // which actually create a new stacking context should be considered part of the parent stacking context,

  // not this new one.

  for (const child of stack.nonPositionedFloats) {

  await this.renderStack(child);

  }

  // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  for (const child of stack.nonPositionedInlineLevel) {

  await this.renderStack(child);

  }

  for (const child of stack.inlineLevel) {

  await this.renderNode(child);

  }

  // 6. All positioned, opacity or transform descendants, in tree order that fall int0 the following categories:

  // All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  // For those with 'z-index: auto', treat the element as if it created a new stacking context,

  // but any positioned descendants and descendants which actually create a new stacking context should be

  // considered part of the parent stacking context, not this new one. For those with 'z-index: 0',

  // treat the stacking context generated atomically.

  //

  // All opacity descendants with opacity less than 1

  //

  // All transform descendants with transform other than none

  for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {

  await this.renderStack(child);

  }

  // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index

  // order (smallest first) then tree order.

  for (const child of stack.positiveZIndex) {

  await this.renderStack(child);

  }

}

在renderStackContent方法中，首先对元素本身调用renderNodeContent和renderNodeBackgroundAndBorders进行渲染处理。

然后处理各个分类的子元素，如果子元素形成了层叠上下文，就调用renderStack方法，这个方法内部继续调用了renderStackContent，这就形成了对于层叠上下文整个树的递归。

如果子元素是正常元素没有形成层叠上下文，就直接调用renderNode，renderNode包括两部分内容，渲染节点内容和渲染节点边框背景色。

async renderNode(paint: ElementPaint): Promise<void> {

  if (paint.container.styles.isVisible()) {

    // 渲染节点的边框和背景色

    await this.renderNodeBackgroundAndBorders(paint);

    // 渲染节点内容

    await this.renderNodeContent(paint);

  }

}

其中renderNodeContent方法是渲染一个元素节点里面的内容，其可能是正常元素、文字、图片、SVG、Canvas、input、iframe，对于不同的内容也会有不同的处理。

以上过程，就是html2canvas的整体内部流程，在了解了大致原理之后，我们再来看一个更为详细的源码流程图，对上述流程进行一个简单的总结。

五、 常见问题总结

在使用html2canvas的过程中，会有一些常见的问题和坑，总结如下:

（一）截图不全

要解决这个问题，只需要在截图之前将页面滚动到顶部即可：

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

（二）图片跨域

插件在请求图片的时候会有图片跨域的情况，这是因为，如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了，canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，详情可参考：developer.mozilla.org/en-US/docs/…

解决方案：在img标签上设置crossorigin，属性值为anonymous，可以开启CROS请求。当然，这种方式的前提还是服务端的响应头Access-Control-Allow-Origin已经被设置过允许跨域。如果图片本身服务端不支持跨域，可以使用canvas统一转成base64格式，方法如下。

function getUrlBase64_pro( len,url ) {

  //图片转成base64

  var canvas = document.createElement("canvas"); //创建canvas DOM元素

  var ctx = canvas.getContext("2d");

  return new Promise((reslove, reject) => {

  var img = new Image();

  img.crossOrigin = "Anonymous";

  img.onload = function() {

  canvas.height = len;

  canvas.width = len;

  ctx.drawImage(img, 0, 0, len, len);

  var dataURL = canvas.toDataURL("image/");

  canvas = null;

  reslove(dataURL);

  };

  img.onerror = function(err){

  reject(err)

  }

  img.src = url;

  });

}

（三）截图与当前页面有区别

方式一：如果要从渲染中排除某些elements，可以向这些元素添加data-html2canvas-ignore属性，html2cnavas会将它们从渲染中排除，例如，如果不想截图iframe的部分，可以如下：

html2canvas(ele,{

useCORS: true,

ignoreElements: (element: any) => {

  if (element.tagName.toLowerCase() === 'iframe') {

  return element;

  }

  return false;

  },

})

方式二：可以将需要转化成图片的部分放在一个节点内，再把整个节点，透明度设置为0， 其他部分层级设置高一些，即可实现截图指定区域。

六、 小结

本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。

参考资料：

1.dom-to-image原理

2.html2image原理简述

3.浏览器端网页截图方案详解

4.html2canvas

5.html2canvas实现浏览器截图的原理（包含源码分析的通用方法）

点赞 + 关注 + 收藏 = 学会了

本文简介

现在大部分网站都会有图片，不管这个图片是用来展示的，还是需要上传到服务器的。

但图片的体积往往比文字大，会占用更多的服务器空间，也会消耗用户更多的流量。所以在适当范围内压缩一下图片是很有必要的。

今天介绍一款纯前端的图片压缩工具：compressor.js。

虽然这是一款有损的图片压缩工具，但压缩质量还是挺不错的，尤其是它可以在前端运行，对于要上传图片到服务器的业务，可以考虑一下用 compressor.js。

你也可以用 Compressor.js 做个图片压缩的工具网站，用户多了就开个百度或者谷歌的广告，也能赚点奶茶钱。

先体验一下 compressor.js 的效果：fengyuanchen.github.io/compressorj…

这是 compressor.js 的代码仓库：github.com/fengyuanche…

动手试试

安装 compressor

npm

npm 通过这条命令安装。

npm install compressorjs

然后在需要使用到 compressor.js 的页面中引入。

import Compressor from 'compressorjs';

CDN

如果你不使用打包工具，也可以直接通过 CDN 在 HTML 中引入 Compressor.js。

<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

​

基础用法

要使用 compressor.js 压缩图片，首先通过 new Compressor 创建一个压缩实例，并传入文件和一些配置参数。成功后会返回一个压缩后的图片对象。

接下来我用一个小例子演示一下。这个例子通过上传一张图片，然后使用 compressor 压缩它，再返回一个下载链接。

<!-- 文件上传控件 -->

<input type="file" id="fileInput" accept="image/*">

​

<!-- 下载压缩后的图片 -->

<div id="downloadLink">

  <a id="downloadCompressed" style="display:none;" download>点击下载压缩后的图片</a>

</div>

​

<!-- 引入 Compressor.js -->

<script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>

​

<script>

  // 获取 file input 和下载链接元素

  const fileInput = document.getElementById('fileInput')

  const downloadCompressed = document.getElementById('downloadCompressed')

​

  // 当文件选择发生变化时触发

  fileInput.addEventListener('change', function(event) {

    const file = event.target.files[0] // 获取上传的文件

​

    if (!file) {

      return // 如果没有选择文件，则不继续执行

    }

​

    // 使用 Compressor.js 压缩图片

    new Compressor(file, {

      success(result) {

        downloadCompressed.href = URL.createObjectURL(result)

​

        // 显示下载链接

        downloadCompressed.style.display = 'inline'

      },

      error(err) {

        console.error('压缩失败:', err)

      },

    })

  })

</script>

在这个例子中，使用了 <input type="file"> 作为上传图片的元素，获取到用户上传的图片后，使用 new Compressor(file[, options]) 来压缩图片，new Compressor 接收2个参数，第一个参数是图片文件，第二个参数是一系列参数，在本例中的所有参数都使用了默认值。最后通过 success() 处理压缩成功后的操作，用 error() 处理压缩失败后的操作。

当压缩成功后就进入 success(result) 里了，这里的 result 返回了压缩成功后的图片对象，通过 URL.createObjectURL(result) 的方式将返回压缩成功后的图片地址。将该地址赋值到 <a> 标签里就能给用户手动点击下载了。

挺简单吧～

配置压缩强度

在前面的例子中，我们通过 new Compressor(file[, options]) 压缩图片，但压缩的强度默认是 80%，在压缩 JPG 时默认是 92%。如果你希望将图片体积压缩得更小（画质会更差），可以在 options 这个参数里配置一项 quality。quality 接收的值是 0～1，quality 的数值越小压缩出来的图片体积就越小，压缩力度就越大。

具体用法：

// 省略部分代码

new Compressor(file, {

  quality: 0.6, // 设置压缩质量为 60%

  success(result) {}, // 压缩成功后执行这里的代码

  error(err) {} // 压缩失败后执行这里的代码

})

设置下载文件的文件名

在前面的例子中，我们下载压缩成功后的图片，文件名看上去是一堆乱码。

比如，我想将压缩后的图片名改成在原图的文件名后面拼上“-德育处主任”，可以这么做。

// 省略部分代码

​

new Compressor(file, {

  quality: 0.6, // 设置压缩质量为 60%

  success(result) {

    // 获取文件名，并给压缩后的文件加上 "-德育处主任" 后缀

    const originalName = file.name;

    const extensionIndex = originalName.lastIndexOf('.');

    const nameWithoutExtension = originalName.substring(0, extensionIndex);

    const extension = originalName.substring(extensionIndex);

    downloadCompressed.download = nameWithoutExtension + '-德育处主任' + extension;

    downloadCompressed.href = URL.createObjectURL(result)

​

    // 显示下载链接

    downloadCompressed.style.display = 'inline'

  },

  error(err) {

    console.error('压缩失败:', err)

  }

})

压缩网络图片

compressor.js 的第一个参数必须是一个 File 对象（通常是通过文件上传获取的），它不支持直接传入网络图片的 URL。因为它需要操作的是一个本地的 File 或 Blob 对象，而不是通过 URL 获取的资源。

但我们可以先通过 JavaScript 将网络图片转换为一个 File 或 Blob 对象，然后再将其传递给 compressor.js。

我上传了一张图片到免费的图床上（这是将我公众号的url转成艺术二维码的图片）： i.imgur.com/zyurGlf_d.w…

function urlToBlob(url) {

  return fetch(url)

    .then((response) => response.blob())

    .then((blob) => {

      // Step 2: 将 Blob 传递给 Compressor.js

      new Compressor(blob, {

        quality: 0.8, // 设置压缩质量

        success(result) {

          console.log('压缩后的图片:', result)

        },

        error(err) {

          console.error('压缩出错:', err)

        },

      })

    })

}

​

const imageUrl = 'https://i.imgur.com/zyurGlf_d.webp?maxwidth=760&fidelity=grand'

​

urlToBlob(imageUrl)

通过 fetch 读取这张图片，然后将读取回来的图片执行 .blob() 方法将其转换成 blob 再丢给 compressor.js 压缩。

以上就是本文的内容啦，如果你想在线体验一下 compressor.js 的压缩能力，可以试试这个网站 worklite.vip/

点赞 + 关注 + 收藏 = 学会了

前言

作为一个 uniapp 初学者，恰巧遇到微信短剧播放器接入的需求，在网上检索许久并没有发现傻瓜式教程。于是总结 uni-app 官网文档及微信开放文档，自行实践后，总结出几个步骤，希望为大家提供些帮助。实践后发现其实确实比较简单，大佬们可能也懒得写文档，那么就由我这个小白大概总结下。本文档仅涉及剧目提审成功后的播放器接入，其余相关问题请参考微信官方文档。

小程序申请插件

参考文档：developers.weixin.qq.com/miniprogram…

首先，需要在小程序后台，申请 appid 为 wx94a6522b1d640c3b 的微信插件，可以在微信小程序管理后台进行添加，路径是 设置 - 第三方设置 - 插件管理 - 添加插件，搜索 wx94a6522b1d640c3b 后进行添加：

uni-app 项目添加微信插件

参考文档：uniapp.dcloud.net.cn/tutorial/mp…

添加插件完成后，在 manifest.json 中，点击 源码视图，找到如下位置并添加红框内的代码，此步骤意在将微信小程序插件引入项目。

/* 添加微短剧播放器插件 */

 "plugins" : {

    "playlet-plugin" : {

         "version" : "latest",

         "provider" : "wx94a6522b1d640c3b"

     }

 }

manifest.json 中完成添加后，需要在 pages.json 中找一个页面（我这边使用的是一个新建的空白页面）挂载组件，挂载方式如下图红框中所示，需注意，这里的组件名称需要与 manifest.json 中定义的一致：

{

	"path": "newPage/newPage",

	"style": {

		"navigationBarTitleText": "",

		"enablePullDownRefresh": false,

		"navigationStyle": "custom",

		"app-plus": {

			"bounce": "none"

		},

		"mp-weixin": {

			"usingComponents": {

				"playlet-plugin": "plugin://playlet-plugin/playlet-plugin"

			}

		}

	}

}

挂载空页面是个笨办法，目前我这边尝试如果不挂载的话，会有些问题，有大神知道别的方法可以在评论区指点一下～

App.vue 配置

参考文档：developers.weixin.qq.com/miniprogram…

首先，找个地方新建一个 playerManager.js，我这边建在了 common 文件夹下。代码如下（代码参考微信官方文档给出的 demo）：

	var plugin = requirePlugin("playlet-plugin");

	// 点击按钮触发此函数跳转到播放器页面

	function navigateToPlayer(obj) {

	    // 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧目的dramaId，变量${srcAppid}是提审方appid，变量${serialNo}是某一集，变量${extParam}是扩展字段，可通过

	    const { extParam, dramaId, srcAppid, serialNo } = obj

	    wx.navigateTo({

	      url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&serialNo=${serialNo}&extParam=${extParam || ''}`

	    })

	}

	const proto = {

	  _onPlayerLoad(info) {

	    const pm = plugin.PlayletManager.getPageManager(info.playerId)

	    this.pm = pm

	    // encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节

	    this.getEncryptData({serialNo: info.serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      pm.setCanPlaySerialList({

	        data: res.encryptedData,

	        freeList: [{start_serial_no: 1, end_serial_no: 10}], // 1~10集是免费剧集

	      })

	    })

	    pm.onCheckIsCanPlay(this.onCheckIsCanPlay)

	    // 关于分享的处理

	    // 开启分享以及withShareTicket

	    pm.setDramaFlag({

	      share: true,

	      withShareTicket: true

	    })

	    // 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数

	    // 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况

	    plugin.getShareParams().then(res => {

	      console.log('getLaunch options query res', res)

	      // 关于extParam的处理，需要先做decodeURIComponent之后才能得到原值

	      const extParam = decodeURIComponent(res.extParam)

	      console.log('getLaunch options extParam', extParam)

	      // 如果设置了withShareTicket为true，可通过文档的方法获取更多信息

	      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

	      const enterOptions = wx.getEnterOptionsSync()

	      console.log('getLaunch options shareTicket', enterOptions.shareTicket)

	    }).catch(err => {

	      console.log('getLaunch options query err', err)

	    })

	    // extParam除了可以通过在path传参，还可以通过下面的接口设置

	    pm.setExtParam('hellotest')

	    // 分享部分end

	  },

	  onCheckIsCanPlay(param) {

	    // TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置

	    console.log('onCheckIsCanPlay param', param)

	    var serialNo = param.serialNo

	    this.getEncryptData({serialNo: serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      this.pm.isCanPlay({

	        data: res.encryptedData,

	        serialNo: serialNo,

	      })

	    })

	  },

	  getEncryptData(obj) {

	    const { serialNo } = obj

	    // TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数

	    const { srcAppid, dramaId } = this.pm.getInfo()

	    console.log('getEncryptData start', srcAppid, dramaId, serialNo)

	    return new Promise((resolve, reject) => {

	      resolve({

	        encryptedData: '' // TODO: 此参数需从后台接口获取到

	      })

	    })

	  },

	}

	function PlayerManager() {

	  var newProto = Object.assign({}, proto)

	  for (const k in newProto) {

	    if (typeof newProto[k] === 'function') {

	      this[k] = newProto[k].bind(this)

	    }

	  }

	}

	

	PlayerManager.navigateToPlayer = navigateToPlayer

	module.exports = PlayerManager

新建完成后，在 App.vue 中进行组件的配置和引用。

onLaunch: function() {

	// playlet-plugin必须和上面的app.json里面声明的插件名称一致

	const playletPlugin = requirePlugin('playlet-plugin')

	

	const _onPlayerLoad = (info) => {

		var PlayerManager = require('@/common/playerManager.js')

		const playerManager = new PlayerManager()

		playerManager._onPlayerLoad(info)

	}

	// 注册播放器页面的onLoad事件

	playletPlugin.onPageLoad(_onPlayerLoad.bind(this))

},

_onPlayerLoad(info) {

	var PlayerManager = require('@/common/playerManager.js')

    const playerManager = new PlayerManager()

    playerManager._onPlayerLoad(info)

},

页面使用

参考文档：developers.weixin.qq.com/miniprogram…

以上所有步骤完成后，就可以开心的使用短剧播放器了。 我这边临时写了个图片的 click 事件测试了一下：

clk() {

	// 逻辑处理...获取你的各种参数

	// 打开组件中封装的播放器页面

	PlayerManager.navigateToPlayer({

		srcAppid: 'wx1234567890123456', // 剧目提审方 appid

		dramaId: '100001', // 小程序管理后台的媒资管理上传的剧目的 dramaId

		serialNo: '1', // 剧目中的某一集

		extParam: encodeURIComponent('a=b&c=d'), // 扩展字段,需要encode

	})

},

写在最后：

总结完了，其实整体下来不是很难，对我这种前端小白来说检索和整合的过程是比较痛苦的，所以希望下一个接入的朋友可以少检索一些文档吧。
另附一个短剧播放器接口的文档： developers.weixin.qq.com/miniprogram…
文档主要介绍了短剧播放器插件提供的几个接口，在js代码里，插件接口实例通过下面的代码获取

// 名字playlet-plugin必须和app.json里面引用的插件名一致

const playletPlugin = requirePlugin('playlet-plugin')

读书越多越发现自己的无知，Keep Fighting！

欢迎友善交流，不喜勿喷~

Hope can help~

前言

挺久没写文章，最近下班后都在打瓦罗兰特，一直在黄金一和白银三徘徊，感觉已经要废了，所以也没啥时间写文章。工作上最近也是换了一个组，之前主要是干web，现在是在写sass中台和h5，然后也是负责一个小迭代，整体其实就是一个curd，但是也是遇到一些奇奇怪怪的坑，有一个我觉得还是很有含金量的，然后我是用了一个第三包解决的，然后也顺带去看了一下这个包的源码，也学到不少的东西，记录分享一下。

请求不响应后重新请求

在我现在这个项目中，对于一些请求，他的生命周期会比较长。正常来说，我们只需要和一个服务端请求，服务端收到后就返回。但是这里是，前端对服务端a请求后，服务端a还要向服务端b去请求，服务器a只能等待服务器b响应后再给我们前端响应，所以就会存在请求不响应超时的问题，如果是偶发性的还好，但是频率好像还挺高的，就是可能调同一个接口10次，有3次是不响应的。然后我这是将网络禁用去模拟的一个效果。

解决方案

解决方案也挺简单的，就是服务端a在5s内如果收不到服务端b的响应，就会给前端报timeout的错误，我这边如果收到timeout的错误就是重新请求，指数型去重试请求5次，如果还是不成功就只能给用户提示“请求超时，请重新提交了”。

代码

axios-retry地址 http://www.npmjs.com/package/axi…

这里使用了axios-retry，这个包就是可以二次封装axios实例去实现重新请求。正常来说，我们的项目中都会对axios进行封装，如下代码，去对请求拦截器和响应拦截器做一些公共处理。

import axios from 'axios'

const http = axios.create({

  headers: {},

  timeout: 5 * 1000 // 请求超时时间

})

// 请求拦截器

http.interceptors.request.use(

  (config) => {

    console.log(config)

    return config

  },

  (err) => {

    console.log(err)

    return Promise.reject(err)

  }

)

// 响应拦截器

http.interceptors.response.use(

  (response) => {

    return response

  },

  (error) => {

    return Promise.reject(error)

  }

)

export default http

这里我们就可以得到一个axios实例http，axios-retry就可以对这个实例进行封装实现重新请求

import axios from 'axios'

import axiosRetry from 'axios-retry'   

const api = axios.create({

  headers: {},

  timeout: 5 * 1000 // 请求超时时间

})

// 请求拦截器

api.interceptors.request.use(

  (config) => {

    console.log(config)

    return config

  },

  (err) => {

    console.log(err)

    return Promise.reject(err)

  }

)

// 响应拦截器

api.interceptors.response.use(

  (response) => {

    // 将index变回0 

    index = 0                         

    return response

  },

  (error) => {

    return Promise.reject(error)

  }

)

axiosRetry(api, {

  retries: 5,

  shouldResetTimeout: true,

  retryDelay: (retryCount) => {

    // retryCount为重试的次数

    return retryCount * 1000

  },

  retryCondition: err => {

    console.log(err)

    index++

    if (index === 5) {

      // 超过五次进行提示就不进行请求

      Toast('请求超时，请重新提交')

      index = 0

      return false

    } else {

      if (err.message.includes('timeout')) return true

      return false

    }

  }

})

export default api

axiosRetry

对于axiosRetry来说，我们只需要去配置下面参数就行

1. retries 重试次数


2. retryCondition 重试条件，返回ture就允许重试，返回false就不允许重试


3. shouldResetTimeout 是否重置超时，ture代表每次重试都重置超时时间 false则相反


4. retryDelay 延迟重试时间,需要返回一个时间


5. onRetry 每次重试时执行的回调函数


6. onMaxRetryTimesExceeded 当达到最大重试次数后执行的回调函数


7. validateResponse 用于验证响应是否有效的函数

可以看到，我代码中定义闭包了一个index变量，在retryCondition中去判断是否为等于5，如果等于5就不进行重试并提示给用户进行重新提交请求，这里要注意的是要维护好index这个变量，在请求成功后变回0。本来我是想在onMaxRetryTimesExceeded 这个配置项去写逻辑的，但是不知道为什么没有执行这里面的逻辑，我也没去研究了，能实现效果就行了。

源码

大家可以npm上这个位置去看源码，大家如果感兴趣，最好还是自己去看一下源码，我的分析可能比较片面，而且我本身技术也就那样。这个第三方包的源码相比vue的源码其实还算简单的，没有那么复杂。虽然简单，我看的也很头大。如果你要继续往下面看，就需要你对axios本身有一丢丢了解才行，就比如请求拦截器，响应拦截器这些。当然也能继续看，就是可能会有点迷迷糊糊的，但是肯定是能学到东西的！然后我是将代码的逻辑通过注释是写在代码里面了，所以要先看一下代码块里面的东西。

axiosRetry

这个方法就是这个第三方包的主函数，我先说下这个包整体上的实现逻辑，在请求拦截器和响应拦截器中维护一个对象，在响应拦截器中，通过这个对象中一些信息去判断要不要重新请求。可以看到这个函数接收两个参数，一个是axiosInstanceaxios实例，一个defaultOptions也就是我在使用axios-retry配置的配置项。可以看下面的代码，从大的方面来看就是一个请求拦截器，一个响应拦截器，最后将这两个拦截器给return了。

const axiosRetry = (axiosInstance, defaultOptions) => {

    

    // 请求拦截器

    const requestInterceptorId = axiosInstance.interceptors.request.use((config) => {

        

        setCurrentState(config, defaultOptions, true);

        

        // 这一段代码可以向不看，这个是为了实现配置项上的validateResponse的功能

        // =====1

        if (config[namespace]?.validateResponse) {

            config.validateStatus = () => false;

        }

        // =====1

        return config;

    });

    

    // 响应拦截器

    const responseInterceptorId = axiosInstance.interceptors.response.use(null, async (error) => {

        const { config } = error;

        // 如果没有config，无法判断是否需要重新请求，直接返回错误

        if (!config) {

            return Promise.reject(error);

        }

        const currentState = setCurrentState(config, defaultOptions);

        

        // 这一段可以先不看，为了实现配置项上的validateResponse的功能

        // =====2

        if (error.response && currentState.validateResponse?.(error.response)) {

            // 如果响应没问题（通过 validateResponse 验证）则直接返回响应

            return error.response;

        }

        // =====2

            

        // 根据是否满足重试条件来决定是执行重试操作（调用 handleRetry 函数）

        if (await shouldRetry(currentState, error)) {

            return handleRetry(axiosInstance, currentState, error, config);

        }

        

        // 这一段可以先不看，为了实现配置项上的 onMaxRetryTimesExceeded 的功能

        // =====3 

        // 在达到最大重试次数后执行相应回调（调用 handleMaxRetryTimesExceeded 函数）

        await handleMaxRetryTimesExceeded(currentState, error);

        // =====3

            

        return Promise.reject(error);

    });

    

    

    return { requestInterceptorId, responseInterceptorId };

};

除了===之间的内容不看后，拦截器里面剩下的就很简单了，在请求拦截器中，就是调用了setCurrentState这个方法，要想理解setCurrentState这个方法，我们得先知道对于一个axois，发起请求是有一个config对象，这个对象里面包括像请求头，请求方式等等的一些字段，所以这个我们可以理解成一个给config对象中添加属性的方法，源码如下。前面我们说过，这个包的整体思路就是在请求拦截器和响应拦截器维护一个对象，而这个对象就是config中的某一个属性，也就是config[namespace]。namespace是一个变量，变量值为axios-retry，也就是config中叫axios-retry的属性。

setCurrentState

这个方法接收三个参数，一个是axois请求的配置，一个用户的配置，一个是否需要重置上次请求时间。可以看下面的代码，一开始是调用了getRequestOptions的这个方法，这个方法就一个合并对象的方法，合并的对象就是我们前面所说的在请求拦截器和响应拦截器维护的那个对象。它是将，我们axios-retry默认配置，用户的配置以及config[namespace]（也就是维护的那个对象）合并成一个对象。整体去看setCurrentState这个方法，可以分为1，2，3步，分别对应着拿变量，改变量，存变量，就和维护变量的操作一模一样。

function setCurrentState(config, defaultOptions, resetLastRequestTime = false) {

    // 合并配置参数 getRequestOptions方法在下面----------------------------1

    const currentState = getRequestOptions(config, defaultOptions || {});

    

    // 初始化或更新重试次数，retryCount就是记录当前重试的次数

    // 如果currentState中没有这个变量，就是第一次请求，有就使用这个变量--------2

    currentState.retryCount = currentState.retryCount || 0;

    // 更新上次请求时间

    if (!currentState.lastRequestTime || resetLastRequestTime) {

        currentState.lastRequestTime = Date.now();

    }

    

    // 赋值给config配置项 namespace就是一个变量，在下面的代码，这就是维护变量的操作---------3

    config[namespace] = currentState;

    

    return currentState;

}

​

// 合并默认配置，就是将默认的，用户设置的，和config中的配置合并

function getRequestOptions(config, defaultOptions) {

    return { ...DEFAULT_OPTIONS, ...defaultOptions, ...config[namespace] };

}

​

// 下面这些代码可以先不看

//===============================================================

// 定义添加config对象中的属性名

export const namespace = 'axios-retry';

​

// 默认配置对象 isNetworkOrIdempotentRequestError和noDelay是一个默认方法，

// 大家感兴趣可以去看源码，因为如果用户有配置的话，就是使用用户配置的回调函数

export const DEFAULT_OPTIONS = {

    retries: 3,

    retryCondition: isNetworkOrIdempotentRequestError,

    retryDelay: noDelay,

    shouldResetTimeout: false,

    onRetry: () => { },

    onMaxRetryTimesExceeded: () => { },

    validateResponse: null

};

我们结合上面的axiosRetry来看，在请求拦截器和响应拦截器都使用了这个方法，也就是说在每一次请求的时候都去更新维护config[namespace]对象。这也就是为啥一直在说核心就是请求拦截器和响应拦截器维护一个对象，那为什么要维护这个对象呢？别急，马上就来了！我们再回去看响应拦截器，除开1，2，3段可以先不看，就剩下下面两行代码，这段代码也就是这个包的核心代码，这段代码主要使用了shouldRetry和handleRetry两个方法，可以看到这两个方法都使用了currentState这个变量，这个变量就是我们一直强调的那个'维护的对象'。shouldRetry方法是用来判断要不要重新的请求，而handleRetry是用来重新请求的方法。

// 根据是否满足重试条件来决定是执行重试操作（调用 handleRetry 函数）

if (await shouldRetry(currentState, error)) {

   return handleRetry(axiosInstance, currentState, error, config);

}

维护的对象

说这么多，这个'维护的对象'到底是什么，我们在请求拦截器中打印一下config这个对象，可能大家已经忘了config是啥，config就是我们在请求拦截器回调接收的那个参数，也就是axois发起请求的配置。在控制台可以看到其中会有axios-retry这样的一个属性，也就是namespace变量的值。我们一直在维护的也是这个axios-retry的值。这个对象里面有重试次数，上次请求时间，重试条件，重试回调等等，也就是我们所配置的那些东西。也就是形参currentState需要的值。

shouldRetry

async function shouldRetry(currentState, error) {

    // 从currentState拿到retries, retryCondition

    const { retries, retryCondition } = currentState;

    // 如果没超过重试次数，然后通过retryCondition去判断，根据这两个去判断要不要重新请求

    const shouldRetryOrPromise = (currentState.retryCount || 0) < retries && retryCondition(error);

    

    

    // 这一段代码是为了兼容retryCondition可能是promise的值，就要去等待他执行完成

    // =========1

    if (typeof shouldRetryOrPromise === 'object') {  // 这可能是一个promise

        try {

            const shouldRetryPromiseResult = await shouldRetryOrPromise;

            // 保持 return true，除非 shouldRetryPromiseResult 返回 false 以实现兼容性

            return shouldRetryPromiseResult !== false;

        }

        catch (_err) {

            return false;

        }

    }

    // ========1

    return shouldRetryOrPromise;

}

这个方法其实很简单，就是通过重试次数，以及用户配置的retryCondition回调，去得到一个布尔值。整体逻辑大家应该都能看得懂，这里需要给大家讲一下error是什么，error就是在响应拦截器中请求失败的回调的传参，也就是当axios请求失败报错的那个值。下面这张图可以看到这个error中也是有config属性的，也有axios-retry的，这很重要！

handleRetry

这个方法就是实现重试的方法，接收四个参数，分别是axiosInstance axios实例，currentState就是config中的axios-retry属性，也就是维护的那个对象，error就是上面那个error，config就是那个config，之前都有提过。

async function handleRetry(axiosInstance, currentState, error, config) {

    

    // 重试次数加1

    currentState.retryCount += 1;

    const { retryDelay, shouldResetTimeout, onRetry } = currentState;

    

    // 执行retryDelay,也就是用户配置的那个retryDelay

    const delay = retryDelay(currentState.retryCount, error);

    

    // 修复config======可以不看，为了兼容，感兴趣的可以去细看源码

    fixConfig(axiosInstance, config);

    

    // 这一段代码是为实现用户配置shouldResetTimeout是否重置超时时间的功能

    // 如果是false，也就是不进行重置超时时间，所以这里要去更新config中的timeout。

    // 如果是ture就不进入这个if,不对timeout做处理

    if (!shouldResetTimeout && config.timeout && currentState.lastRequestTime) {

        const lastRequestDuration = Date.now() - currentState.lastRequestTime;

        const timeout = config.timeout - lastRequestDuration - delay;

        if (timeout <= 0) {

            return Promise.reject(error);

        }

        config.timeout = timeout;

    }

    

    // config.transformRequest是对请求数据进行处理，这里的意思就是传入了什么，就用什么数据。

    // 这行代码是为了重置转换函数。

    config.transformRequest = [(data) => data];

    

    // 执行onRetry，也就是用户配置的onRetry

    await onRetry(currentState.retryCount, error, config);

    

    // config.signal是AbortController产生的，AbortController是提供取消异步操作的一个js接口。

    // 这里所有关于config.signal都是为了兼容，兼容用户对请求进行主动取消的情况下。

    // 他是去监听abort事件，因为如果用户需要主动取消请求，会去触发abort事件

    // 这里是做了一个防抖以及监听事件和取消监听。

    // 如果没有接触过，可以直接把这些相关代码（1，2，3，4）先删了再去看，

    // 把这些删了之后发现就只剩下了一个定时器和axiosInstance(config)。

    // axiosInstance(config)就是重新请求。

    

    // =============1

    if (config.signal?.aborted) {

        return Promise.resolve(axiosInstance(config));

    }

    // =============1

    

    return new Promise((resolve) => {

        // =============2

        const abortListener = () => {

            clearTimeout(timeout);

            resolve(axiosInstance(config));

        };

        // =============2

        

        // delay是上面retryDelay得出的东西

        const timeout = setTimeout(() => {

            resolve(axiosInstance(config));

            

            // =============3

            if (config.signal?.removeEventListener) {

                config.signal.removeEventListener('abort', abortListener);

            }

            // =============3

        }, delay);

        

        // =============4

        if (config.signal?.addEventListener) {

            config.signal.addEventListener('abort', abortListener, { once: true });

        }

        //  =============4

    });

}

梳理

看到这里大家可能明白了，可能很懵。因为我这是对核心源码一行一行的去注释，可能并不能将整条线连起来，所以我这用文字去总结一下。首先，我们先将重试作为主线，去看重试是怎么实现的。还是那个'维护的对象'，这个对象串联了整条线，这个对象包括我们的重试条件，重试回调等等这些方法。我们先在请求拦截器中和响应拦截器中都是使用了setCurrentState去维护这个对象，然后再响应拦截器中去通过shouldRetry去判断该不该重试，再通过handleRetry去重试。而这两个方法实现的前提就是这个'维护的对象'。比如该不该重试，是通过用户配置的retryCondition和重试次数去判断的，再比如怎么去重试，是通过axios实例配合config参数再次请求。其次，我们再通过我们配置的参数，去看重试这条主线的支线，也就是retryDelay重试延时时间，shouldResetTimeout是否重置超时时间，onRetry重试回调，onMaxRetryTimesExceeded最大重试次数后执行的回调，validateResponse验证响应内容。这些在上面的代码注释中，我都有标明在哪里实现的。

总结

axios-retry这个包是很不错的，可以在无响应报错的时候进行重新请求。在前后端交互的时候，或多或少都会遇到接口不响应超时的问题。而在一些很需要的接口响应的场景，是很实用的，然后源码看不看懂其实都无所谓，会用就行，而且我们这种底层前端的工作内容基本都是curd，根本不用去造轮子。不过看源码也是有很多好处的，比如怎么封装包能让用户有更多的扩展性，像这里的retryCondition和onRetry就不错。还有可以增加自己的自信心的，这包一周是有三百万人在使用的，感觉也没有多复杂，我又觉得我行了（手动狗头）。最后，来个赋能哥带我上分呗，我真打不上去啊。

适配及响应式处理

1. 一次搞懂数据大屏适配方案 (vw vh、rem、scale)
2. 处理scale方案下有空白问题

效果实现

Echarts线图线条渐变色及区域渐变

• 效果图

• 关注点
  1. 线条颜色渐变
  2. 线条含有阴影
  3. 区域填充色渐变
• 配置项

series:[{

  data: [820, 932, 901, 934, 1290, 1330, 1320],

  type: 'line',

  smooth: false,

  lineStyle: {

    normal: {

      // 1. 设置线条渐变色

      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [

        {

          offset: 0,

          color: '#FDFDFF',

        },

        {

          offset: 0.3,

          color: '#6EA4F8',

        },

        {

          offset: 0.6,

          color: '#7DA0E0',

        }, {

          offset: 1,

          color: '#679BF0',

        },

      ]), 

      width: 3,

      // 2. 设置线条阴影

      shadowColor: '#2E4F84',

      shadowOffsetY: 15,

      shadowOffsetX: 5,

      shadowBlur: 3,

    },

  },

  // 3. 设置区域填充渐变：渐变色设置文档 https://echarts.apache.org/zh/option.html#color

  areaStyle: {

    color: {

      type: 'linear',

      x: 0,

      y: 0,

      x2: 0,

      y2: 1,

      colorStops: [

        {

          offset: 0,

          color: 'rgba(36,173,254, 0.5)',

        }, {

          offset: 1,

          color: 'rgba(52,112,252, 0.1)',

        },

      ],

    },

  },

}]

Echarts外环饼图

• 效果图

• 关注点
  1. 内圈含有间隔数据
  2. 外圈效果
• 配置项

// 数据处理

// 间隔空白数据

const gapData = {

  name: '',

  value: 20,

  itemStyle: {

    color: 'transparent', // 颜色设置为透明数据

  },

};



// 计算饼图渲染数据

const seriesData = [];

[

  { value: 1048, name: 'Search Engine' },

  { value: 735, name: 'Direct' },

  { value: 580, name: 'Email' },

  { value: 484, name: 'Union Ads' },

  { value: 300, name: 'Video Ads' }

].forEach((item) => {

  seriesData.push(item);

  seriesData.push(gapData);

});

// 图表配置项

series: [

  // 内圆环配置项

  {

    data: seriesData,

    roundCap: true,

    center: ['50%', '50%'],

    radius: ['50%', '60%'],

    label: {

      show: false,

      position: 'center',

    },

  }，

  // 外圆环配置项

  {

    type: 'pie',

    name: '旋转圆',

    silent: true,

    center: ['50%', '50%'],

    radius: ['70%', '69%'],

    hoverAnimation: false,

    startAngle: 50,

    // Notes：这里的数据根据要展示的外环段数及长短自定义设置

    data:[120, 40, 120, 40, 120, 40].map((item, index) => ({

      value: item,

      name: '',

      itemStyle: {

        color: index % 2 === 0 ? '#5999E1' : 'transparent',

        shadowBlur: 20,

        shadowColor: '#86C6FD',

      },

    })),

    label: {

      normal: {

        show: false,

      },

    },

    labelLine: {

      normal: {

        show: false,

      },

    },

  }

],

Echarts 渐变色柱状图

• 效果图

• 关注点
  1. 柱体颜色渐变
• 配置项

  series: [

    {

      data: [120, 200, 150, 80, 70, 110, 130],

      type: 'bar',

      // 设置柱体颜色渐变

      itemStyle: {

        normal: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            {

              offset: 1,

              color: '#20517E',

              opacity: 0.85,

            },

            {

              offset: 0,

              color: '#3FC0F7',

              opacity: 0.79,

            },

          ]),

        },

      },

      label: {

        show: true,

        color:'#3FC0F7',

        fontSize: 12,

        position: 'outside', 

      },

    }

  ]

Echarts含图片标签渐变色柱状图

• 效果图

• 关注项
  1. 渐变色柱体
  2. 高亮结尾
  3. 数据标签含背景图
• 配置项

option = {

  backgroundColor:'#17243A',

  tooltip: {

    trigger: 'axis',

    axisPointer: {

      type: 'shadow'

    }

  },

  grid: {

    left: '3%',

    right: '4%',

    bottom: '3%',

    containLabel: true

  },

  xAxis: {

    type: 'value',

    boundaryGap: [0, 0.01]

  },

  yAxis: [

    {

      inverse: true,

      axisLabel: {

      color: '#ADCBE9',

      fontSize: 20,

      formatter: (value) => {

        if (value.length < 8) {

          return value;

        }

        return `${value.substring(0, 8)}...`;

      },

    },

    axisLine: {

      lineStyle: {

        color: 'transparent',

      },

    },

    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  }, {

      inverse: true,

      axisTick: 'none',

      axisLine: 'none',

      axisLabel: {

        show: true,

        fontSize: 20,

        fontWeight: 'bold',

        color: '#BFD1E3',

        padding: [5, 12, 5, 12],

        backgroundColor: {

           image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAWCAYAAAA/45nkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVRoge3ZwQoBURTG8XOvKzGzmnQ3SpKJrMZb2HsQL+MRLCkb5RHsbNVspGwkRYamplipaSiUOodzZnl/d/FvZvPVqP5geoXMs18ve0l8ibLnfq1SDlebXfZc7LWZQtHxqq1x1g0AwDZcdKmG/4sl8SW6v+e7HfJ2qCnEcTaNHcDdNAAA1TgOlqv77TnVuH+3ODpO9LuXxb5vSXw+PXwAKnFcTH9yWez7JjMU2WSGYs9Q7ADuprEDuJvMUGSTGYpsMkORTWYooplCydW2EYwoxnEwr9ocaVDKpRjHxZ6uICpxHExmKLIZAADrd2bpwzD175Jq+C+abQRjUMpJ+w1co8ZyUwNCuQAAAABJRU5ErkJggg==',

        },

       },

      data: [120, 200, 150, 80, 70, 110, 130],

    },

  ],

  series: [

        {

          type: 'pictorialBar',

          symbol: 'image://data:image/png;base64,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',

      symbolOffset: [20, -5],

      symbolSize: [40, 40],

      symbolPosition: 'end',

      z: 12,

      data: [120, 200, 150, 80, 70, 110, 130],

    }, {

      name: '',

      type: 'bar',

      showBackground: true,

      yAxisIndex: 0,

      barWidth: 7,

      barBorderRadius: 10,

      data: [120, 200, 150, 80, 70, 110, 130].map((value, index) => ({

        value,

        itemStyle: {

          normal: {

            color: {

              type: 'linear',

              x: 0,

              y: 0,

              x2: 1,

              y2: 0,

              colorStops: [

                {

                  offset: 0,

                  color: '#2F3E56',

                },

                {

                  offset: 1,

                  color:'#7BB1EE',

                },

              ],

            },

          },

        },

      })),

    },

  ]

};

Echarts立体柱状图

• 效果图

• 关注点
  1. 三面立体
  2. 柱体渐变
• 配置项

  // 自定义图形
  
  // 绘制左侧面
  
  export const CubeLeft = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const xAxisPoint = shape.xAxisPoint;
  
      const c0 = [shape.x, shape.y];
  
      const c1 = [shape.x - offsetX, shape.y - offsetY];
  
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
  
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
  
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1])
  
        .closePath();
  
    },
  
  });
  
  
  
  // 绘制右侧面
  
  export const CubeRight = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const xAxisPoint = shape.xAxisPoint;
  
      const c1 = [shape.x, shape.y];
  
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
  
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
  
      const c4 = [shape.x + offsetX, shape.y - offsetY];
  
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  
        .closePath();
  
    },
  
  });
  
  // 绘制顶面
  
  export const CubeTop = echarts.graphic.extendShape({
  
    shape: {
  
      x: 0,
  
      y: 0,
  
    },
  
    buildPath (ctx, shape) {
  
      const c1 = [shape.x, shape.y];
  
      const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
  
      const c3 = [shape.x, shape.y - offsetX];
  
      const c4 = [shape.x - offsetX, shape.y - offsetY];
  
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
  
        .closePath();
  
    },
  
  });
  
  

  function getRenderItem(param, type) {
  
    const colorList = ['#66C9F2', '#80D1CD', '#9BD977'];
  
    const color = colorList[param.dataIndex % 3];
  
    const rgba = color16ToRGBA(color, type === 'top' ? 0.6 : 0.01);
  
    return {
  
      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  
        {
  
          offset: 1,
  
          color: rgba,
  
        },
  
        {
  
          offset: 0,
  
          color,
  
        },
  
      ]),
  
    };
  
  }
  
  

  // 图表配置项
  
  config = {
  
    xAxis: {
  
      axisLine: {
  
        lineStyle: {
  
          color: 'transparent',
  
        },
  
      },
  
      axisLabel: {
  
        color: '#B1CBD8',
  
        fontSize: 20,
  
      },
  
    },
  
    yAxis: {
  
      show: false,
  
      splitLine: {
  
        show: false,
  
      },
  
    },
  
    series:[
  
      {
  
        type: 'custom',
  
        // 使用自定义的图形进行绘制
  
        renderItem: (params, api) => {
  
          const location = api.coord([api.value(0), api.value(1)]);
  
          return {
  
            type: 'group',
  
            children: [
  
              {
  
                type: 'CubeLeft', // 绘制左侧面
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params),
  
                },
  
              },
  
              {
  
                type: 'CubeRight', // 绘制右侧面
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params),
  
                },
  
              },
  
              {
  
                type: 'CubeTop', // 绘制顶层
  
                shape: {
  
                  api,
  
                  xValue: api.value(0),
  
                  yValue: api.value(1),
  
                  x: location[0],
  
                  y: location[1],
  
                  xAxisPoint: api.coord([api.value(0), 0]),
  
                },
  
                style: {
  
                  ...getRenderItem(params, 'top'),
  
                },
  
              },
  
            ],
  
          };
  
        },
  
        data: [120, 200, 150, 80, 70, 110, 130],
  
      },
  
      {
  
        type: 'bar',
  
        label: {
  
          normal: {
  
            show: true,
  
            position: 'top',
  
            formatter: e => `${e.value}%`,
  
            fontSize: 15,
  
            color: '#fff',
  
            offset: [0, -15],
  
          },
  
        },
  
        itemStyle: {
  
          color: 'transparent',
  
        },
  
        tooltip: {},
  
        data: [120, 200, 150, 80, 70, 110, 130],
  
      },
  
    ]
  
  }