清明节黑白效果=>来聊聊色彩矩阵算法

最新推荐文章于 2022-02-10 15:35:06 发布
最新推荐文章于 2022-02-10 15:35:06 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： javascript javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011551941/article/details/105334624
版权

昨天各大平台收到通知，需要首页以黑白效果来展示，高级浏览器有一个简单的属性，全局设置一下，就可以满足：

-webkit-filter: grayscale(100%);filter: grayscale(100%);

在低级浏览器可以借助第三方插件来实现，比如说grayscale.js这种。

这种插件的原理，简单来说就是递归DOM结构，判断节点的类型，如果是文本直接更改其颜色值，如果是图片，通过canvas来更改颜色值。

如何改变图片的颜色呢，就是今天咱们来聊的色彩矩阵。

其实就是把每个像素值跟多维矩阵乘一下就得到一个新的像素值(rgba)(底部有封装好的初始矩阵通道)

matrix!:Array = [];

RGBA = [ R, G, B, A ]

matrix =[ 1, 0, 0, 0, 0,
          0, 1, 0, 0, 0,
          0, 0, 1, 0, 0,
          0, 0, 0, 1, 0 ] //原始通道

新的颜色信息 = RGBA * matrix = [
                matrix[0]*R + matrix[1]*G + matrix[2]*B + matrix[3]*A + matrix[4] // R通道
                matrix[5]*R + matrix[6]*G + matrix[7]*B + matrix[8]*A + matrix[9] // G通道
                matrix[10]*R + matrix[11]*G + matrix[12]*B + matrix[13]*A + matrix[14] // B通道
                matrix[15]*R + matrix[16]*G + matrix[17]*B + matrix[18]*A + matrix[19] // A通道
             ]

matrix由 20 个项目组成的数组，适用于 4 x 5 颜色转换。

red通道的值：（1，0，0，0，0）表示，R通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

green通道的值：（0,  1,  0,  0,  0）表示，G通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

blue通道的值：（0,  0,  1,  0,  0）表示，B通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

alpha通道的值：（0,  0,  0,  1,  0）表示，A通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

4 x 5  4行5列我们已经知晓其4列(RGBA),至于第5列(简称N)是颜色亮度的调节:

1,0,0,0,N
0,1,0,0,N
0,0,1,0,N
0,0,0,1,0

N=>亮度取值范围-255到255,只需要设置一下RGB的色彩偏移就能调节其亮度

举例说明：如果想要一个值为 rgba(200, 100, 50, 1 ) 的颜色，只保留红色通道的色彩。我们只需要调整 matrix 并做如下运算:

[ 200, 100, 50, 1 ] * [ 1, 0, 0, 0, 0,
                        0, 0, 0, 0, 0,
                        0, 0, 0, 0, 0,
                        0, 0, 0, 1, 0 ] = [
                            1*200 + 0*100 + 0*50 + 0*1 + 0,
                            0*200 + 0*100 + 0*50 + 0*1 +0,
                            0*200 + 0*100 + 0*50 + 0*1 +0,
                            0*200 + 0*100 + 0*50 + 1*1 +0,
                        ] = [ 200, 0, 0, 1 ]

颜色反转

[ 200, 100, 50, 1 ] * [ -1, 0, 0, 0, 255,
                        0, -1, 0, 0, 255,
                        0, 0, -1, 0, 255,
                        0, 0, 0, 1, 0 ] = [
                            -1*200 + 0*100 + 0*50 + 0*1 + 255,
                            0*200 + -1*100 + 0*50 + 0*1 +255
                            0*200 + 0*100 + -1*50 + 0*1 +255,
                            0*200 + 0*100 + 0*50 + 1*1 +0,
                        ] = [ 206, 206, 206, 1]

咱们昨天的黑白是如何实现的呢，颜色去色，同样是矩阵算法，但是通道值却不是跟上面一样的1:

matrix = [ 0.3086, 0.6094, 0.0820, 0, 0
            0.3086, 0.6094, 0.0820, 0, 0
            0.3086, 0.6094, 0.0820, 0, 0
            0 , 0 , 0, 1, 0 ]

只要把RGB三通道的色彩信息设置成一样；即：R＝G＝B，那么图像就变成了灰色，并且，为了保证图像亮度不变，同一个通道中的R+G+B=1,很多人会奇怪为啥是这三个小数，其实是把RGB做了一个比例均分:大概是3：6：1，即：0.3086, 0.6094, 0.0820

看到这里来了，应该就会明白更改图片颜色的关键是矩阵乘法，通过不同的多维矩阵原始值，来达到不同的效果，包括咱们看到的微信图片滤镜，以及社交平台ins的图片滤镜，也是通过多维矩阵算法来实现一个图片滤镜。

下面看看，我们可以利用这个玩意最终来做成什么效果(家中浩克出来当次模特吧):

以下是每个不同效果封装好的初始矩阵值(就好像上面说的，同一个通道的RGB相加必须等于1 => R+G+B=1)

desaturate: function() {
			return this.add([
						FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, 0, 
						FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, 0, 
						FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, 0, 
						0, 0, 0, 1, 0
					]);
		},
		//平均 返回灰色图片 是对红绿蓝进行加权平均数的计算
		average: function( r, g, b ) {
			if ( r === undefined ) r = 0.3333;
			if ( g === undefined ) g = 0.3333;
			if ( b === undefined ) b = 0.3334;
			
			return this.add([
					r, g, b, 0, 0, 
					r, g, b, 0, 0, 
					r, g, b, 0, 0, 
					0, 0, 0, 1, 0
				]);
		},
		
		//明度  对红绿蓝进行数值偏移计算
		brightness: function( r, g, b ) {
			if ( g === undefined )  g = r;
			if ( b === undefined )  b = r;
			return this.add([
					1, 0, 0, 0, r, 
					0, 1, 0, 0, g, 
					0, 0, 1, 0, b, 
					0, 0, 0, 1, 0
				]);
		},
		
		
		
		//着色
		colorize: function( rgb, alpha ) {
			var r, g, b, inv_alpha;
			if ( alpha === undefined ) alpha = 1;
			//var alpha = alpha ? 0 : 1;
			r = (((rgb >> 16) & 255) * 0.0039215686274509803921568627451);  // / 255
			g = (((rgb >> 8) & 255) * 0.0039215686274509803921568627451);  // / 255
			b = ((rgb & 255) * 0.0039215686274509803921568627451);  // / 255
			inv_alpha = 1 - alpha;
			
			//console.log((rgb >> 8).toString(2))
			//console.log((255).toString(2))
			//console.log(((rgb >> 8) & 255).toString(2))
			
			//console.log((inv_alpha + ((alpha * r) * FILTER.LUMA[0])), ((alpha * r) * FILTER.LUMA[1]), ((alpha * r) * FILTER.LUMA[2]), 0, 0)
			//console.log(((alpha * g) * FILTER.LUMA[0]), (inv_alpha + ((alpha * g) * FILTER.LUMA[1])), ((alpha * g) * FILTER.LUMA[2]), 0, 0)
			//console.log(((alpha * b) * FILTER.LUMA[0]), ((alpha * b) * FILTER.LUMA[1]), (inv_alpha + ((alpha * b) * FILTER.LUMA[2])), 0, 0)
	
			return this.add([
						(inv_alpha + ((alpha * r) * FILTER.LUMA[0])), ((alpha * r) * FILTER.LUMA[1]), ((alpha * r) * FILTER.LUMA[2]), 0, 0, 
						((alpha * g) * FILTER.LUMA[0]), (inv_alpha + ((alpha * g) * FILTER.LUMA[1])), ((alpha * g) * FILTER.LUMA[2]), 0, 0, 
						((alpha * b) * FILTER.LUMA[0]), ((alpha * b) * FILTER.LUMA[1]), (inv_alpha + ((alpha * b) * FILTER.LUMA[2])), 0, 0, 
							0, 0, 0, 1, 0
						]);
		},
		
		//反向
		invert: function( ) {
			return this.add([
					-1, 0,  0, 0, 255,
					0, -1,  0, 0, 255,
					0,  0, -1, 0, 255,
					0,  0,  0, 1,   0
				]);
		},
		
		invertRed: function( ) {
			return this.add([
					-1, 0,  0, 0, 255,
					0,  1,  0, 0, 255,
					0,  0,  1, 0, 255,
					0,  0,  0, 1,   0
				]);
		},
		
		invertGreen: function( ) {
			return this.add([
					1,  0,  0, 0, 255,
					0,  -1, 0, 0, 255,
					0,  0,  1, 0, 255,
					0,  0,  0, 1,   0
				]);
		},
		
		invertBlue: function( ) {
			return this.add([
					1,  0,  0, 0, 255,
					0,  1,  0, 0, 255,
					0,  0, -1, 0, 255,
					0,  0,  0, 1,   0
				]);
		},
		
		//alpha 反向
		invertAlpha: function( ) {
			return this.add([
					1,  0,  0, 0, 0,
					0,  1,  0, 0, 0,
					0,  0,  1, 0, 0,
					0,  0,  0, -1, 255
				]);
		},
		
		//饱和度
		saturate: function( s ) {
			
			var sInv, irlum, iglum, iblum;
			sInv = (1 - s);
			irlum = (sInv * FILTER.LUMA[0]);
			iglum = (sInv * FILTER.LUMA[1]);
			iblum = (sInv * FILTER.LUMA[2]);
			
			return this.add([
					(irlum + s), iglum, iblum, 0, 0, 
					irlum, (iglum + s), iblum, 0, 0, 
					irlum, iglum, (iblum + s), 0, 0, 
					0, 0, 0, 1, 0
				]);
		},
		
		//对比度
		contrast: function( r, g, b ) {
			if ( g === undefined )  g = r;
			if ( b === undefined )  b = r;
			r += 1.0; g += 1.0; b += 1.0;
			return this.add([
					r, 0, 0, 0, (128 * (1 - r)), 
					0, g, 0, 0, (128 * (1 - g)), 
					0, 0, b, 0, (128 * (1 - b)), 
					0, 0, 0, 1, 0
				]);
		},
		//快速校正对比度
		quickContrastCorrection: function( contrast ) {
			if ( contrast === undefined ) contrast = 1.2;
			return this.add([
				contrast, 0, 0, 0, 0, 
				0, contrast, 0, 0, 0, 
				0, 0, contrast, 0, 0, 
				0, 0, 0, 1, 0
				]);
		},
		
		//色相调整 色环 0-360
		adjustHue: function( degrees ) {
			degrees *= FILTER.CONSTANTS.toRad;
			var cos = Math.cos(degrees), sin = Math.sin(degrees);
			
			return this.add([
					((FILTER.LUMA[0] + (cos * (1 - FILTER.LUMA[0]))) + (sin * -(FILTER.LUMA[0]))), ((FILTER.LUMA[1] + (cos * -(FILTER.LUMA[1]))) + (sin * -(FILTER.LUMA[1]))), ((FILTER.LUMA[2] + (cos * -(FILTER.LUMA[2]))) + (sin * (1 - FILTER.LUMA[2]))), 0, 0, 
					((FILTER.LUMA[0] + (cos * -(FILTER.LUMA[0]))) + (sin * 0.143)), ((FILTER.LUMA[1] + (cos * (1 - FILTER.LUMA[1]))) + (sin * 0.14)), ((FILTER.LUMA[2] + (cos * -(FILTER.LUMA[2]))) + (sin * -0.283)), 0, 0, 
					((FILTER.LUMA[0] + (cos * -(FILTER.LUMA[0]))) + (sin * -((1 - FILTER.LUMA[0])))), ((FILTER.LUMA[1] + (cos * -(FILTER.LUMA[1]))) + (sin * FILTER.LUMA[1])), ((FILTER.LUMA[2] + (cos * (1 - FILTER.LUMA[2]))) + (sin * FILTER.LUMA[2])), 0, 0, 
					0, 0, 0, 1, 0
				]);
		},
		
		
		
		//sepia 偏色  褐色调旧照片。
		sepia: function( amount ) {
			if ( amount === undefined ) amount = 0.5;
			if ( amount > 1 ) amount = 1;
			else if ( amount < 0 ) amount = 0;
			return this.add([
				1.0 - (0.607 * amount), 0.769 * amount, 0.189 * amount, 0, 0, 
				0.349 * amount, 1.0 - (0.314 * amount), 0.168 * amount, 0, 0, 
				0.272 * amount, 0.534 * amount, 1.0 - (0.869 * amount), 0, 0, 
				0, 0, 0, 1, 0
			]);
		},
		
		//sepia2 偏色  红褐色调旧照片。
		sepia2: function( amount ) {
			if ( amount === undefined ) amount = 10;
			if ( amount > 100 ) amount = 100;
			amount *= 2.55;
			return this.add([
				FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, 40, 
				FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, 20, 
				FILTER.LUMA[0], FILTER.LUMA[1], FILTER.LUMA[2], 0, -amount, 
				0, 0, 0, 1, 0
			]);
		},
		//灰白阈值
		threshold: function( threshold, factor ) {
			if ( factor === undefined )  factor = 256;
			
			return this.add([
					(FILTER.LUMA[0] * factor), (FILTER.LUMA[1] * factor), (FILTER.LUMA[2] * factor), 0, (-(factor-1) * threshold), 
					(FILTER.LUMA[0] * factor), (FILTER.LUMA[1] * factor), (FILTER.LUMA[2] * factor), 0, (-(factor-1) * threshold), 
					(FILTER.LUMA[0] * factor), (FILTER.LUMA[1] * factor), (FILTER.LUMA[2] * factor), 0, (-(factor-1) * threshold), 
					0, 0, 0, 1, 0
				]);
		},
		
		
		//阈值 保留彩色
		threshold_rgb: function( threshold, factor ) {
			if ( factor === undefined )  factor = 256;
			
			return this.add([
					factor, 0, 0, 0, (-(factor-1) * threshold), 
					0, factor, 0, 0, (-(factor-1) * threshold), 
					0,  0, factor, 0, (-(factor-1) * threshold), 
					0, 0, 0, 1, 0
				]);
		},
		
		/*threshold_alpha: function( threshold, factor ) {
			if ( threshold === undefined )  threshold = 0.5;
			if ( factor === undefined ) factor = 256;
			
			return this.add([
					1, 0, 0, 0, 0, 
					0, 1, 0, 0, 0, 
					0, 0, 1, 0, 0, 
					0, 0, 0, factor, (-factor * threshold)
				]);
		},*/

 

寓言s
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是ColorMatrix
weixin_30439131的博客
07-22 273
ColorMatrix（色彩矩阵），是GDI+里用来调整图片色彩的矩阵。 什么是矩阵，说白了就是C#里的二维数组。 那么这个矩阵调整色彩的原理是什么，他是怎么来调整色彩的呢？这个要从线性代数里的矩阵相乘说起。 以下段落学过线性代数的读者可以跳过，这里我用自己的理解来描述下矩阵相乘的算法和结果。 在线性代数里，两个矩阵相乘，是这样计算的： ...
[转]ColorMatrixFilter--颜色矩阵滤镜
weixin_34413802的博客
10-16 175
转自： http://blog.sina.com.cn/s/blog_49b35d540100aks4.html       ColorMatrixFilter--颜色矩阵滤镜(flash.filters.ColorMatrixFilter) 在颗粒等级上提供给你更好的控制方法。ColorMatrixFilter为 4行5列的多维矩阵(20个元素的数组)。图1是与ColorMatrixFilt...
Paint，ColorMatrix(颜色矩阵)实现滤镜效果及矩阵运算
杨的博客
06-21 4884
滤镜效果：颜色通道每个图像都有一个或多个颜色通道，图像中默认的颜色通道数取决于其颜色模式，即一个图像的颜色模式将决定其颜色通道的数量。例如，CMYK图像默认有4个通道，分别为青色、洋红、黄色、黑色。在默认情况下，位图模式、灰度、双色调和索引颜色图像只有一个通道。RGB和Lab图像有3个通道，CMYK图像有4个通道。每个颜色通道都存放着图像中颜色元素的信息。所有颜色通道中的颜色叠加混合产生图像中像素...
ColorMatrix:颜色矩阵
05-08
色彩矩阵 颜色矩阵使用所需的颜色在正方形矩阵上绘制图像多种颜色可供选择
计算清明节日期算法python例子.rar
最新发布
04-04
清明节
幼儿园清明节主题环创（25款）.doc
03-25
幼儿园清明节主题环创（25款）
清明节PSD模板下载
08-31
清明节PSD模板下载
清明节主题班会ppt课件.pptx
08-14
清明节主题班会ppt
【Android 应用开发】Paint 滤镜原理 之 颜色矩阵 ( 颜色模式 | 颜色通道 | 颜色矩阵 | 矩阵运算 | 矩阵乘法 | 矩阵加法 | 颜色矩阵深入解析 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-31 987
颜色模式 颜色通道 Android 中的颜色矩阵 矩阵乘法运算 滤镜中的矩阵乘法运算 矩阵加法运算 滤镜中的矩阵乘法运算 滤镜运算原理 ( 总结 ) 实际滤镜理论示例
ColorMatrixFilter色彩矩阵滤镜
wapjingle的专栏
01-12 1181
包 flash.filters 类 public final class ColorMatrixFilter 继承 ColorMatrixFilter  BitmapFilter  Object 使用 ColorMatrixFilter 类可以将 4 x 5 矩阵转换应用于输入图像上的每个像素的 RGBA 颜色和 Alpha 值，以生成具有一组新的 RGBA 颜色和 Alpha 值的结果。
颜色矩阵原理解析
热门推荐
YanRu的专栏
07-19 2万+
在编程中有时候需要对图片做特殊的处理，比如将图片做出黑白的，或者老照片的效果，有时候还要对图片进行变换，以拉伸，扭曲等等。 这些效果在android中有很好的支持，通过颜色矩阵（ColorMatrix）和坐标变换矩阵（Matrix）可以完美的做出上面的所说的效果。 下面将分别介绍这两个矩阵的用法和相关的函数。 颜色矩阵 android中可以通过颜色矩阵（ColorMatrix类）方面的
Android色彩矩阵——ColorMatrix
Lxr的博客
08-31 1779
在Android的开发中，我们少不了对图片进行处理，其中最常使用的数据结构就是位图Bitmap，它包含了一张图片的所有数据。既然是位图那它就是由一个个像素点组成的。每一个像素点都会有其对应的颜色值——ARGB，分别对应透明度、红、绿、蓝这四个分量。它们共同决定了每个像素点显示的颜色。色彩矩阵概念在Android中图片是以RGBA像素点的形式加载到内存中的，修改这些像素信息需要一个叫做ColorMat
颜色矩阵 滤镜 ColorMatrix
weixin_33859844的博客
05-14 167
颜色矩阵原理色彩的三要素1、色相。色相通俗的说就是“颜色”，色相的改变就是颜色的改变，色相的调节伴随着红橙黄绿蓝紫的变化。2、亮度。明度通俗的说就是“光照度”，明度的改变就是光照在物体上带来的改变，明度的调节伴随着越高，光越强，越泛白（就像过曝一样，往白色上偏离）；越低，光越弱，越往黑里偏3、饱和度。饱和度通俗的说就是“色彩的纯度”，饱和度的改变会影响颜色的鲜艳程度，以红色为例子，越高，越接近红色...
颜色矩阵
coobeedongzhou的专栏
09-28 2416
转自http://tieba.baidu.com/p/1730549463 颜色矩阵可以做到上面所讲的和颜色搭边的一切.颜色矩阵的功能是很强大的,理解起来也相对困难一点,涉及了很多色彩的专用的术语,一般的新手和一般的皮肤制作都用不上,我对色彩研究也不是很深,下面我只是略微谈下我的理解。 首先讲一下官网里面的Tips-ColorMatrixUnleased的以前的版本,这个以前的技术
PS色彩算法理解记录 1 Darken Lighten
webgpu
02-10 1071
Darken 色彩公式为min(background,blend); 分别对R G B通道取其中较小的值，这样颜色无论如何都会小于原有模样 Lighten 则是max(background,blend); 同理，取大的RGB值，这样图片的色彩就会亮于原有的模样
import React, { useState } from 'react' import calendar from 'js-calendar-converter' const j = ['立春', '惊蛰', '清明', '立夏', '芒种', '小暑', '立秋', '白露', '寒露', '立冬', '大雪', '小寒'] const News = () => { const formatDate = (date) => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const lunarDate = calendar.solar2lunar(year, month, day) console.log(lunarDate) return `${year}年${month}月${day}日 ${hour}时${minute}分` } const handleConfirm = (val) => { formatDate(val) } return ( <div> <DatePicker onConfirm={handleConfirm} /> </div> ) } 以上代码里，变量j里的内容为我国十二节气的名称。 打印lunarDate结果显示有很多参数，包括参数Term代表某一节气的名称，参数cYear代表当前选中的阳历年，参数cMonth代表当前选中的阳历月，cDay代表当前选中的阳历日，参数date代表当前选中的阳历年月日。 使用react、es6语法和Javascript修改以上代码，实现获取每一年每一个十二节气的阳历日期。
05-25
可以使用循环遍历的方式获取每一年的十二节气阳历日期。具体实现如下： ``` import React, { useState } from 'react' import calendar from 'js-calendar-converter' const j = ['立春', '惊蛰', '清明', '立夏', '芒种', '小暑', '立秋', '白露', '寒露', '立冬', '大雪', '小寒'] const News = () => { const [solarDates, setSolarDates] = useState([]) const getSolarDates = (year) => { const solarDatesOfYear = [] for (let i = 0; i < j.length; i++) { const solarDate = calendar.lunar2solar(year, i * 2 + 3, 1) // 通过农历日期计算阳历日期 solarDatesOfYear.push({ term: j[i], year: solarDate.cYear, month: solarDate.cMonth, day: solarDate.cDay, date: `${solarDate.cYear}-${solarDate.cMonth}-${solarDate.cDay}` }) } return solarDatesOfYear } const handleConfirm = (val) => { const year = val.getFullYear() const solarDatesOfYear = getSolarDates(year) setSolarDates(solarDatesOfYear) } return ( <div> <DatePicker onConfirm={handleConfirm} /> <ul> {solarDates.map((solarDate, index) => ( <li key={index}>{solarDate.term}: {solarDate.date}</li> ))} </ul> </div> ) } ``` 首先，在组件中添加一个状态变量`solarDates`，用于存储每一年的十二节气阳历日期。 在`getSolarDates`函数中，使用循环遍历的方式获取每一年的十二节气阳历日期。具体实现为，通过计算每个节气对应的农历日期，然后将其转换为阳历日期。最后将阳历日期存储到`solarDatesOfYear`数组中。 在`handleConfirm`函数中，获取选中的年份，然后调用`getSolarDates`函数获取该年份的十二节气阳历日期，并将其存储到`solarDates`状态变量中。 在组件中渲染`solarDates`数组中的阳历日期。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值