CN106155728B - 一种用于支持canvas的浏览器的检测字体的方法和装置 - Google Patents

一种用于支持canvas的浏览器的检测字体的方法和装置 Download PDF

Info

Publication number
CN106155728B
CN106155728B CN201510187784.8A CN201510187784A CN106155728B CN 106155728 B CN106155728 B CN 106155728B CN 201510187784 A CN201510187784 A CN 201510187784A CN 106155728 B CN106155728 B CN 106155728B
Authority
CN
China
Prior art keywords
font
canvas
text
default
area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201510187784.8A
Other languages
English (en)
Other versions
CN106155728A (zh
Inventor
刘政
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201510187784.8A priority Critical patent/CN106155728B/zh
Publication of CN106155728A publication Critical patent/CN106155728A/zh
Application granted granted Critical
Publication of CN106155728B publication Critical patent/CN106155728B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Controls And Circuits For Display Device (AREA)

Abstract

本申请公开一种用于支持canvas的浏览器的检测字体的方法和装置,该方法是根据获取的预设区域内的像素数据及默认字体和指定字体的名称判断指定字体是否安装,若检测出某一客户端默认字体数据和指定字体数据相同且默认字体和指定字体的名称不同,则说明以指定字体填充文本时由于指定字体未安装则实际以默认字体填充,导致像素数据相同但是字体名称不同,若两者像素数据不同,则说明指定字体已经安装可用。采用扫描出的预设区域的像素数据进行对比判断指定字体是否安装可以提高检测的准确性。

Description

一种用于支持canvas的浏览器的检测字体的方法和装置
技术领域
本申请涉及一种检测指定字体是否安装的技术领域,具体涉及一种用于支持canvas的浏览器的检测字体方法,以及对应所述检测字体方法设置的一种用于支持canvas的浏览器的检测字体装置。
背景技术
随着计算机时代的到来,字库的概念被大众所熟知,计算机中使用的字库一般包括多种适用于计算机语言的字体,字体可分为楷体、黑体、隶书、宋体等多种形式,只有在计算机中安装某一字体,该字体才可以在计算机上显示,若没有安装,则该字体不会显示。
为了统计和收集某一指定字体在用户的电脑上的安装情况,可通过使用前端脚本嵌入浏览器中的方式检测指定字体是否安装。
浏览器可分为支持canvas(画布)功能和不支持画布功能两种,针对支持画布功能的浏览器,现有技术采用的是将指定字体和默认字体分别在创建的画布上渲染显示,所述默认字体是电脑中安装的默认显示的字体,指定字体是需要检测的是否安装的字体,通过数据获取方法分别获取指定字体和默认字体的宽度和高度,然后将两个字体的宽度及高度进行对比操作。该方法适合英文字体的检测,因为英文字母中不同的字母宽度不同,但是对于中文,每个字都是等宽等高的,所以采用该方法将大大降低检测的准确性。
发明内容
本申请提供一种用于支持canvas的浏览器的检测字体的方法,以解决现有检测字体安装情况时出现的检测准确性低的问题。
本申请还提供用于支持canvas的浏览器的检测字体的装置。
本申请提供一种用于支持canvas的浏览器的检测字体的方法,包括:
在当前页面上创建画布;
在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;
在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;
获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据;
根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装。
可选的,所述根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装,包括:
当所述默认字体数据和指定字体数据不相同时,则判断为所述指定字体已安装。
可选的,所述根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装,包括:
当所述默认字体数据和指定字体数据相同时,则执行下述操作:
判断所述默认字体和所述指定字体的名称是否相同;若不同,则判断为所述指定字体未安装。
可选的,当所述默认字体和所述指定字体的名称相同,则所述指定字体已安装,且所述指定字体与所述默认字体的字体相同。
可选的,当所述默认字体数据和指定字体数据相同时,首先执行下述操作:
获取所述默认字体的名称;
将所述默认字体的名称与所述指定字体的名称比对。
可选的,所述获取所述默认字体的名称是,采用浏览器内置的应用程序编程接口获取所述默认字体的名称。
可选的,当所述重叠区域为所述预设区域时,所述重叠区域为所述文本填充区域中的部分区域;
相应的,所述获取所述重叠区域内的像素数据是,采集所述文本填充区域中的部分区域,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。
可选的,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分是指在所述重叠区域内文本填充的区域占重叠区域的比例大于等于50%。
可选的,所述获取所述重叠区域内的像素数据步骤具体是:
确定所述重叠区域的区域范围;
对所述区域范围内每个像素点进行逐个扫描;
获取每个像素点的像素数据。
可选的,所述获取每个像素点的像素数据是,通过应用程序编程接口中的数据调用函数来获取重叠区域内每个像素点的像素数据。
可选的,所述像素数据是所述预设区域内每个像素点的RGBA值,其中R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值,A为色彩的不透明度参数值。
可选的,所述在所述画布上绘制预设图形是,在所述画布上绘制两个预设图形,形成两个预设区域;
相应的,所述在所述画布上分别采用默认字体和指定字体填充文本包括在所述画布的两个文本填充区域分别采用默认字体和指定字体填充文本;
两个预设区域与两个文本填充区域分别形成两个重叠区域,所述获取所述重叠区域内的像素数据是同时获取两个重叠区域内的像素数据。
可选的,所述在所述画布上绘制预设图形是,在所述画布上绘制一个预设图形,形成一个预设区域;
相应的,所述在所述画布上分别采用默认字体和指定字体填充文本,获取所述重叠区域内的像素数据包括:
在所述画布上采用默认字体填充文本;
获取采用默认字体填充文本时所述重叠区域内的像素数据;
在所述画布上采用指定字体填充文本;
获取采用指定字体填充文本时所述重叠区域内的像素数据。
可选的,所述在所述画布上分别采用默认字体和指定字体填充文本是采用文本填充方法以默认字体和指定字体在画布上填充文本。
可选的,所述在当前页面上创建画布是采用canvas图形容器和脚本命令生成画布。
本申请还提供一种用于支持canvas的浏览器的检测字体的装置,包括:
画布创建单元,用于在当前页面上创建画布;
预设图形绘制单元,用于在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;
文本填充单元,用于在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;
像素数据获取单元,用于获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用所述默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据;
判断单元,用于根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装。
可选的,所述判断单元具体用于,当所述默认字体数据和指定字体数据不相同时,则判断为所述指定字体已安装。
可选的,当所述默认字体数据和指定字体数据相同时,所述判断单元还用于,判断所述默认字体和所述指定字体的名称是否相同;若不同,则判断为所述指定字体未安装。
可选的,所述判断单元中当所述默认字体和所述指定字体的名称相同,则所述指定字体已安装,且所述指定字体与所述默认字体的字体相同。
可选的,所述判断单元还包括:
默认字体名称获取子单元,用于当所述默认字体数据和指定字体数据相同时,获取所述默认字体的名称;
字体名称比对子单元,用于将所述默认字体的名称与所述指定字体的名称比对。
可选的,所述默认字体名称获取子单元具体是,采用浏览器内置的应用程序编程接口获取所述默认字体和所述指定字体的名称。
可选的,所述文本填充单元中,当所述重叠区域为所述预设区域时,所述重叠区域为所述文本填充区域的部分区域;
相应的,所述像素数据获取单元具体用于,采集所述文本填充区域中的部分区域,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。
可选的,所述像素数据获取单元包括:
区域范围确定子单元,用于确定所述重叠区域的区域范围;
扫描子单元,用于对所述区域范围内每个像素点进行逐个扫描;
数据获取子单元,用于获取每个像素点的像素数据。
可选的,所述数据获取子单元中具体是通过应用程序编程接口中的数据调用函数来获取重叠区域内每个像素点的像素数据。
可选的,所述像素数据是所述预设区域内每个像素点的RGBA值,其中R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值,A为色彩的不透明度参数值。
可选的,所述预设图形绘制单元中绘制的预设图形是,在所述画布上绘制两个预设图形,形成两个预设区域;
相应的,所述文本填充单元具体用于在所述画布的两个文本填充区域分别采用默认字体和指定字体填充文本;
两个预设区域与两个文本填充区域分别形成两个重叠区域,所述像素数据获取单元具体用于同时获取两个重叠区域内的像素数据。
可选的,所述预设图形绘制单元中绘制的预设图形是,在所述画布上绘制一个预设图形,形成一个预设区域;
文本填充单元包括默认字体填充子单元和指定字体填充子单元,所述像素数据获取单元包括分别对应默认字体填充子单元和指定字体填充子单元的默认字体像素获取单元和指定字体像素获取单元;
所述默认字体填充子单元用于在所述画布上采用默认字体填充文本;
所述默认字体像素获取单元用于获取采用默认字体填充文本的所述重叠区域内的像素数据;
所述指定字体填充子单元用于在所述画布上采用指定字体填充文本;
所述指定字体像素获取单元用于获取采用指定字体填充文本的所述重叠区域内的像素数据。
可选的,所述文本填充单元具体是采用文本填充方法以默认字体和指定字体在画布上填充文本。
可选的,所述画布创建单元具体是采用canvas图形容器和脚本命令生成画布。
与现有技术相比,本申请具有以下优点:本申请提供一种用于支持canvas的浏览器的检测字体的方法,包括:在当前页面上创建画布;在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用所述默认字体和指定字体填充文本时,采集的所述预设区域内的像素数据;根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装。该方法是根据获取的预设区域内的像素数据及默认字体和指定字体的名称判断指定字体是否安装,若检测出某一客户端默认字体数据和指定字体数据相同且默认字体和指定字体的名称不同,则说明以指定字体填充文本时由于指定字体未安装则实际以默认字体填充,导致像素数据相同但是字体名称不同,若两者像素数据不同,则说明指定字体已经安装可用。采用扫描出的预设区域的像素数据进行对比判断指定字体是否安装可以提高检测的准确性。
附图说明
图1是本申请实施例提供的一种用于支持canvas的浏览器的检测字体的方法的流程图。
图2是本申请实施例提供的重叠区域为预设区域时获取重叠区域内像素数据的效果图.
图3是本申请实施例提供的获取所述预设区域内的像素数据的其中一个方法的流程图。
图4是本申请实施例提供的一种用于支持canvas的浏览器的检测字体的装置的示意图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本申请内涵的情况下做类似推广,因此本申请不受下面公开的具体实施的限制。
在本申请中,分别提供了一种用于支持canvas的浏览器的检测字体方法,以及一种用于支持canvas的浏览器的检测字体装置,在下面的实施例中逐一进行详细说明。首先对本申请提供的技术方案作简要说明。
根据本申请技术方案的要求,本申请的方案对不具有canvas功能的浏览器并不适用,如低于ie8版本的ie浏览器,由于其不具有canvas功能,通常采用最原生方法通过获取字体的名称检测指定字体是否安装。
本申请针对的浏览器是具有canvas功能的浏览器,一般为现代浏览器或者是高于ie8版本的ie浏览器,其中,现代浏览器如谷歌浏览器、火狐浏览器和opera浏览器等,上述浏览器具有的共同特点是均支持canvas功能,所述canvas是利用脚本语言(如JavaScript)在网页上绘制图像的应用程序编程接口。而本申请的技术方案依赖于canvas技术,是以在网页上绘制图形为基础,并对图像进行相应操作的一项技术。
本申请实施例的技术方案是应用于web前端开发,即通过前端脚本的方式可以完成本申请的技术方案。
图1是本申请实施例提供的一种用于支持canvas的浏览器的检测字体的方法的流程图,请参照图1,本申请提供一种用于支持canvas的浏览器的检测字体的方法,步骤如下:
步骤S101,在当前页面上创建画布。
采用canvas图形容器和脚本命令在当前浏览器的页面上创建画布,所述canvas图形容器用于在浏览器的页面上实时生成图像,并且可以操作图像的内容,所生成的图像可定义为采用JavaScript操作的位图(bitmap)。而针对位图的相应操作可以获取该位图特定位置的图像的像素。
所述JavaScript是一种属于网络的脚本语言,已经被广泛应用于Web应用开发,常用来为网页添加各式各样的动态动能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在html中来实现自身的功能的。
步骤S102,在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域。
在上述通过图形容器创建的画布上绘制预设图形,该绘制过程可通过脚本语言(如JavaScript)进行实现,可以通过JavaScript创建一个矩形的预设图形,该预设图形形成的区域定义为预设区域,由于创建的画布为位图格式,在该画布上的预设区域内也同样为位图格式,通过数据获取方法等可以获取所述预设区域内的像素数据。
由于本申请实施例提供的技术方案中涉及两种字体的比较,所以在绘制预设图形时,可以有两种方式,分别如下:
第一种绘制预设图形的方式:可以在所述画布上绘制两个相同大小的预设图形,形成两个预设区域,分别为第一预设区域和第二预设区域。
上述两个预设区域可以是按照横向对齐的方式排列,也可以是按照竖向对齐的方式排列,也可以是绘制的两个没有排列规则和位置关系的预设图形。
由于后续步骤的需求,两个预设区域之间不可以重叠,并且两个区域之间需要预留一定的空间,以便在后续设置文本填充区域时,所述文本填充区域不会同时与第一预设区域和第二预设区域有重合区域。
第二种绘制预设图形的方式:可以在所述画布上绘制一个预设图形,形成一个预设区域。
若为该种方式时,需要重复利用该预设区域,并且所述预设区域在所述画布上的位置不受限制。
上述两种绘制预设图形的方式均可采用,在可以达到本申请实施例的技术方案的前提下可以灵活变动。
步骤S103,在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域。
在该步骤中涉及两个概念,一个是默认字体,一个是指定字体。以下对上述两种字体做详细介绍。
所述默认字体是浏览器的当前页面显示的字体,该字体在浏览器中一定安装并且可用才可以通过页面渲染出来,因此,默认字体是渲染在页面上已经安装好的字体,也是本申请实施例的方案中需要与指定字体做比对的字体。
所述指定字体是需要检测用户是否安装的字体,也可称为待检测字体。当用户安装了所述指定字体时,且用户设置浏览器的字体为指定字体进行显示,浏览器页面中被指定的文字部分将以指定字体显示,但是,如果所述指定字体没有安装时,且用户设置浏览器的字体为指定字体进行显示,但由于用户电脑并没有安装该指定字体,浏览器页面中被指定的文字部分将会以默认字体替代指定进行显示。
在所述画布上分别采用默认字体和指定字体填充文本,具体可采用调用文本填充函数fillText()的方法填充默认字体的文本和指定字体的文本,且填充有文本的区域称为文本填充区域。
由于步骤S102中的绘制的预设图形分为两种方式,因此,在采用默认字体和指定字体填充文本时,也会出现不同的方式。
首先,针对步骤S102中第一种绘制预设图形的方式(请参照步骤S102中的内容),在该方式下,形成第一预设区域和第二预设区域两个预设区域。
在所述第一预设区域的相应位置采用默认字体填充文本,填充有文本的该区域称为默认文本填充区域;相应的,在所述第二预设区域的相应位置采用指定字体填充文本,填充有文本的区域成为指定文本填充区域。
所述第一预设区域与所述默认本文填充区域之间的位置关系为具有重叠区域,同时所述第二预设区域与所述指定本文填充区域之间也具有重叠区域,并且在步骤S102中有介绍,两个预设区域之间留有一定空间,以保证默认文本填充区域不会同时与第一预设区域和第二预设区域具有重叠部分,相应的,所述指定文本填充区域也不会同时与第一预设区域和第二预设区域具有重叠部分。
所述第一预设区域也可以与指定文本填充区域具有重合部分,所述第二预设区域与默认文本填充区域具有重合部分,即填充文本的先后顺序和位置关系都没有完全的限定,可根据实际情况进行选择。
需要说明的是,所述预设区域与所述文本填充区域具有的重叠部分可称为重叠区域,该重叠区域可以分为三种情况。
第一种情况是,所述重叠区域为文本填充区域。该种情况下,所述文本填充区域完全处于所述预设区域内,所述文本填充区域内的填充的文本全部落在所述预设区域内。
第二种情况是,所述重叠区域为预设区域。在该中情况下,所述文本填充区域包含所述预设区域,且所述预设区域可以定义为所述文本填充区域的部分区域。
所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。由于该方法是为了检测所述指定字体是否安装,需要指定字体和默认字体作比对,因此,在设置作比对的区域时,需要将该区域设置为最能体现文本的字体特征的文本部分。
通常情况下,文本的笔画越多越复杂,则对比特征越明显,因此,需要在重叠区域中文本填充部分占用重叠区域比例较大时则可满足对比要求,优选地,可将所述重叠的部分区域设定为在所述重叠区域内文本填充的区域占重叠区域的比例大于等于50%。
第三种情况是,所述重叠区域既不是所述预设区域也不是所述文本填充区域,即预设区域与文本填充区域仅具有部分重叠,该种情况下实际应用于本申请实施例的方案中相当于第二种情况,即所述预设区域为所述文本填充区域的部分区域。
上述描述的是第一种绘制预设图形的方式时在画布上填充文本的情况,以下介绍第二种绘制预设图形的方式时在画布上填充文本的情况。
第二种绘制预设图形的方式为在画布上绘制一个预设图形,从而形成一个预设区域。
在该预设区域的相应位置的画布上填充默认字体或者指定字体,填充有文本的区域称为文本填充区域,所述预设区域与所述文本填充区域之间具有重叠区域。
所述重叠区域同样也存在三种情况,该三种情况已经在上述过程中作了详细的描述,因此,在此针对所述重叠区域不再赘述。
由于在所述画布上仅绘制一个预设图形,形成一个预设区域,但需要在画布上分别填充默认字体和指定字体,因此,需要重复利用所述预设区域,在填充默认字体和指定字体的文本时不具有先后顺序,且该步骤与下述步骤S104具有关联,该情况下的分别采用默认字体和指定字体填充文本的具体过程将在步骤S104中进行详述。
步骤S104,获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用所述默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据。
所述获取所述重叠区域内的像素数据的步骤中具体可采用下述步骤实现:
确定所述重叠区域的区域范围;
对所述区域范围内每个像素点进行逐个扫描;
获取每个像素点的像素数据。
其中,获取每个像素点的像素数据具体可通过应用程序编程接口(API)中的数据调用函数(例如getImageDate())来获取重叠区域中每个像素点的像素数据。
所述像素数据是所述预设区域内每个像素点的RGBA值,其中RGB是位图颜色的一种编码方法,用红、绿、蓝三原色的光学强度来表示一种颜色。这是最常见的位图编码方法,可以直接用于屏幕显示。R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值。另外A为色彩的不透明度参数值,表征某一个像素点的不透明度。
特定区域内的RGBA值可以表征该区域的像素值是否完全相同,因此,可以采用RGBA值检测所述指定字体和所述默认字体渲染出的像素值是否相同。
由于上述介绍了所述重叠区域有三种情况,可分别对上述三种情况时,获取所述重叠区域内的像素数据步骤的进行分别描述。
第一种情况,所述重叠区域为文本填充区域,即所述文本填充区域内的填充的文本全部落在所述预设区域内。获取所述重叠区域内的像素数据即是获取所述文本填充区域内的像素数据。
在该种情况下,比对默认字体像素数据和指定字体像素数据时,需要获取重叠区域内的所有像素点以便获取检测结果,虽然在检测效率上存在一定的问题,但是可以大大提高检测字体的准确性。
第二种情况和第三种情况均是所述重叠区域为所述文本填充区域的部分区域。获取所述重叠区域内的像素数据即是抽样获取的填充文本的其中某部分的像素数据。图2是本申请实施例提供的重叠区域为预设区域时获取重叠区域内像素数据的效果图。请参照图2,左为黑体,右为宋体,左右两边使用不同的字体在canvas创建的画布中进行字体填充。通过getImageData方法扫描每个圆圈(预设区域)内的像素点的RGBA值,这样在扫描检测过程中,不需要将填充有文本区域的所有像素点进行扫描,仅需要将圆圈(预设区域)内的像素值扫描获取即可,因此,不但可以准确检测两种字体是否相同,还可以大大提高脚本运行的速率和性能。
上述虽然描述了所述重叠区域的三种不同情况下,获取重叠区域内像素数据的方法,但是,不管重叠区域是哪种情况,获取的均是所述重叠区域内的像素数据,该像素数据分别是默认字体数据和指定字体数据。
另外,在步骤S102中介绍有绘制预设图形的两种方式,根据绘制图形的方式不同,则获取所述重叠区域内像素数据的方法也不相同。
在绘制两个预设图形的情况下,由于两个预设区域和两个文本填充区域共形成两个重叠区域,获取所述重叠区域内的像素数据时同时获取两个重叠区域内的像素数据即可,分别获取所述默认字体数据和指定字体数据。
在绘制一个预设图形的情况下,获取所述预设区域内的像素数据时比较复杂。在步骤S103中介绍说由于步骤S103和步骤S104之间具有关联,因此会在步骤S104中详述,此处将对该过程进行详述。图3是本申请实施例提供的获取所述重叠区域内的像素数据的其中一个方法的流程图,请参照图3。
步骤S104-1,在所述画布上采用默认字体填充文本。
步骤S104-2,获取采用默认字体填充文本的所述重叠区域内的像素数据。
步骤S104-3,在所述画布上采用指定字体填充文本。
步骤S104-4,获取采用指定字体填充文本的所述重叠区域内的像素数据。
由于在所述画布上仅设置有一个预设区域,但需要分别采用默认字体和指定字体填充文本,并获取默认字体数据和指定字体数据两种像素数据,因此,需要分两次填充文本和获取像素数据,但是采用默认字体和指定字体填充时并没有顺序要求,可以采用图3所示的步骤进行,也可以先在所述画布上采用指定字体填充文本,获取采用指定字体填充文本的所述重叠区域内的像素数据,然后再在所述画布上采用默认字体填充文本,获取采用默认字体填充文本的所述重叠区域内的像素数据。
步骤S105,根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装。
首先,对获取的所述默认字体数据和指定字体数据进行判断,根据判断结果可分析得出所述指定字体是否安装。
若所述判断结果为否,则所述默认字体数据和指定字体数据的像素数据不相同,则说明指定字体和默认字体渲染出的文本的像素值是不相同的,如果两种字体的像素值不相同,则说明指定字体是可以在网页或者用户端的电脑上渲染的,因此,可以说明所述指定字体在用户端已经安装。
若所述判断结果为是,即所述默认字体数据与指定字体数据相同时,则需要对指定字体和默认字体再分析判断,可以采用下述步骤进行判断:
判断所述默认字体和所述指定字体的名称是否相同,若不同,则所述指定字体未安装。
如果所述指定字体数据和默认字体数据相同,不能直接判断所述指定字体是否安装,因为在指定字体数据和默认字体数据相同的情况下,还存在指定字体名称与默认字体名称相同或者不同的情况。
当需要判断字体名称,且没有预先获知所述默认字体的名称的情况下,可先进行下述步骤:
获取所述默认字体的名称;
将所述默认字体的名称与所述指定字体的名称比对。
所述获取所述默认字体的名称具体可采用浏览器内置的应用程序编程接口获取所述默认字体和所述指定字体的名称。
当需要判断字体名称,但已经预先获知所述默认字体的名称的情况下,可以直接判断所述指定字体与所述默认字体的名称是否相同。
以下是对指定字体名称和默认字体名称相同或不同的情况的分析:
如果指定字体名称与默认字体名称相同,则说明所待测的指定字体就是用户已经安装的默认字体,该情况一般不是我们检测待测字体时的真正需求,因为如果已经根据字体名称得知指定字体即是默认字体,就不需要进行后续的判断等步骤,因此,两者名称相同的情况在此处也可省略。
如果所述指定字体的名称与所述默认字体的名称不相同,则根据分析可判断出所述指定字体未安装。具体分析如下:
首先,默认字体数据和指定字体数据如果不相同,则说明填充的默认字体和指定字体是不相同的。只有用户安装了指定字体,在采用指定字体填充文本时,显示的文本才会以指定字体的字体渲染,若用户没有安装指定字体,则在采用指定字体填充文本时,显示的文本会以默认字体渲染,获取的默认字体数据和指定字体数据应该相同,所以,根据正向和逆向的分析,当默认字体数据和指定字体数据如果不相同时,说明指定字体在用户端已安装。
其次,如果默认字体数据和指定字体数据相同,并且默认字体的名称与指定字体的名称不相同时,根据上述分析可得知如果用户端未安装指定字体时,用指定字体填充文本,文本实际将以默认字体渲染显示,由于默认字体填充和指定字体填充文本均显示的是默认字体,所以,获取的默认字体数据和指定字体数据相同,由于指定字体的名称与默认字体又不相同,说明待检测的指定字体并不是默认字体,但却以默认字体显示,这足以说明指定字体并没有在用户安装使用。
本申请实施例提供的一种用于支持canvas的浏览器的检测字体的方法,通过在浏览器的当前页面的画布上分别采用默认字体和指定字体填充文本,通过扫描获取重叠区域像素数据,并对像素数据进行对比判断,并根据判断结果确定指定字体是否安装。该方法通过默认字体和指定字体在葱段区域内的像素数据做比较,大大提高检测字体的准确性。
另外,本申请实施例还提供一种用于支持canvas的浏览器的检测字体的装置,该装置是对应于上述一种用于支持canvas的浏览器的检测字体的方法设置的一种装置,因此,具体详细内容可参考上述方法。
图4是本申请实施例提供的一种用于支持canvas的浏览器的检测字体的装置的示意图。请参照图4。
本申请实施例提供一种用于支持canvas的浏览器的检测字体的装置,包括:
画布创建单元401,用于在当前页面上创建画布;
预设图形绘制单元402,用于在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;
文本填充单元403,用于在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;
像素数据获取单元404,用于获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用所述默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据;
判断单元405,用于根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装。
可选的,所述判断单元405具体用于,当所述默认字体数据和指定字体数据不相同时,则判断为所述指定字体已安装。
可选的,当所述默认字体数据和指定字体数据相同时,所述判断单元405还用于,判断所述默认字体和所述指定字体的名称是否相同;若不同,则判断为所述指定字体未安装。
可选的,所述判断单元405中当所述默认字体和所述指定字体的名称相同,则所述指定字体已安装,且所述指定字体与所述默认字体的字体相同。
可选的,所述判断单元405还包括:
默认字体名称获取子单元,用于当所述默认字体数据和指定字体数据相同时,获取所述默认字体的名称;字体名称比对子单元,用于将所述默认字体的名称与所述指定字体的名称比对。
可选的,所述默认字体名称获取子单元具体是,采用浏览器内置的应用程序编程接口获取所述默认字体和所述指定字体的名称。
可选的,所述文本填充单元403中,当所述重叠区域为所述预设区域时,所述重叠区域为所述文本填充区域的部分区域;
相应的,所述像素数据获取单元404具体用于,采集所述文本填充区域中的部分区域,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。
可选的,所述像素数据获取单元404包括:
区域范围确定子单元,用于确定所述重叠区域的区域范围;
扫描子单元,用于对所述区域范围内每个像素点进行逐个扫描;
数据获取子单元,用于获取每个像素点的像素数据。
可选的,所述数据获取子单元中具体是通过应用程序编程接口中的数据调用函数来获取重叠区域内每个像素点的像素数据。
可选的,所述像素数据是所述预设区域内每个像素点的RGBA值,其中R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值,A为色彩的不透明度参数值。
可选的,所述预设图形绘制单元402中绘制的预设图形是,在所述画布上绘制两个预设图形,形成两个预设区域;
相应的,所述文本填充单元403具体用于在所述画布的两个文本填充区域分别采用默认字体和指定字体填充文本;
两个预设区域与两个文本填充区域分别形成两个重叠区域,所述像素数据获取单元404具体用于同时获取两个重叠区域内的像素数据。
可选的,所述预设图形绘制单元402中绘制的预设图形是,在所述画布上绘制一个预设图形,形成一个预设区域;
文本填充单元403包括默认字体填充子单元和指定字体填充子单元,所述像素数据获取单元404包括分别对应默认字体填充子单元和指定字体填充子单元的默认字体像素获取单元和指定字体像素获取单元;
所述默认字体填充子单元用于在所述画布上采用默认字体填充文本;
所述默认字体像素获取单元用于获取采用默认字体填充文本的所述重叠区域内的像素数据;
所述指定字体填充子单元用于在所述画布上采用指定字体填充文本;
所述指定字体像素获取单元用于获取采用指定字体填充文本的所述重叠区域内的像素数据。
可选的,所述文本填充单元403具体是采用文本填充方法以默认字体和指定字体在画布上填充文本。
可选的,所述画布创建单元401具体是采用canvas图形容器和脚本命令生成画布。
本申请虽然以较佳实施例公开如上,但其并不是用来限定本申请,任何本领域技术人员在不脱离本申请的精神和范围内,都可以做出可能的变动和修改,因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
本申请虽然以较佳实施例公开如上,但其并不是用来限定本申请,任何本领域技术人员在不脱离本申请的精神和范围内,都可以做出可能的变动和修改,因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
2、本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

Claims (25)

1.一种用于支持canvas的浏览器的检测字体的方法,其特征在于,包括:
在当前页面上创建画布;
在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;
在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;
获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据;
根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装;所述根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装,包括:
当所述默认字体数据和指定字体数据不相同时,则判断为所述指定字体已安装;当所述默认字体数据和指定字体数据相同时,则执行下述操作:
判断所述默认字体和所述指定字体的名称是否相同;若不同,则判断为所述指定字体未安装。
2.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,当所述默认字体和所述指定字体的名称相同,则所述指定字体已安装,且所述指定字体与所述默认字体的字体相同。
3.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,当所述默认字体数据和指定字体数据相同时,首先执行下述操作:
获取所述默认字体的名称;
将所述默认字体的名称与所述指定字体的名称比对。
4.根据权利要求3所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述获取所述默认字体的名称是,采用浏览器内置的应用程序编程接口获取所述默认字体的名称。
5.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,当所述重叠区域为所述预设区域时,所述重叠区域为所述文本填充区域中的部分区域;
相应的,所述获取所述重叠区域内的像素数据是,采集所述文本填充区域中的部分区域,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。
6.根据权利要求5所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分是指在所述重叠区域内文本填充的区域占重叠区域的比例大于等于50%。
7.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述获取所述重叠区域内的像素数据步骤具体是:
确定所述重叠区域的区域范围;
对所述区域范围内每个像素点进行逐个扫描;
获取每个像素点的像素数据。
8.根据权利要求7所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述获取每个像素点的像素数据是,通过应用程序编程接口中的数据调用函数来获取重叠区域内每个像素点的像素数据。
9.根据权利要求7所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述像素数据是所述预设区域内每个像素点的RGBA值,其中R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值,A为色彩的不透明度参数值。
10.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述在所述画布上绘制预设图形是,在所述画布上绘制两个预设图形,形成两个预设区域;
相应的,所述在所述画布上分别采用默认字体和指定字体填充文本包括在所述画布的两个文本填充区域分别采用默认字体和指定字体填充文本;
两个预设区域与两个文本填充区域分别形成两个重叠区域,所述获取所述重叠区域内的像素数据是同时获取两个重叠区域内的像素数据。
11.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述在所述画布上绘制预设图形是,在所述画布上绘制一个预设图形,形成一个预设区域;
相应的,所述在所述画布上分别采用默认字体和指定字体填充文本,获取所述重叠区域内的像素数据包括:
在所述画布上采用默认字体填充文本;
获取采用默认字体填充文本时所述重叠区域内的像素数据;
在所述画布上采用指定字体填充文本;
获取采用指定字体填充文本时所述重叠区域内的像素数据。
12.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述在所述画布上分别采用默认字体和指定字体填充文本是采用文本填充方法以默认字体和指定字体在画布上填充文本。
13.根据权利要求1所述的用于支持canvas的浏览器的检测字体的方法,其特征在于,所述在当前页面上创建画布是采用canvas图形容器和脚本命令生成画布。
14.一种用于支持canvas的浏览器的检测字体的装置,其特征在于,包括:
画布创建单元,用于在当前页面上创建画布;
预设图形绘制单元,用于在所述画布上绘制预设图形,所述预设图形形成的区域为预设区域;
文本填充单元,用于在所述画布上分别采用默认字体和指定字体填充文本,填充有文本的区域称为文本填充区域,所述文本填充区域与所述预设区域具有重叠区域;
像素数据获取单元,用于获取所述重叠区域内的像素数据,所述像素数据包括默认字体数据和指定字体数据;所述默认字体数据和指定字体数据分别为在画布上采用所述默认字体和指定字体填充文本时,采集的所述重叠区域内的像素数据;
判断单元,用于根据所述默认字体数据和指定字体数据,判断所述指定字体是否已安装;所述判断单元具体用于,当所述默认字体数据和指定字体数据不相同时,则判断为所述指定字体已安装;当所述默认字体数据和指定字体数据相同时,所述判断单元还用于,判断所述默认字体和所述指定字体的名称是否相同;若不同,则判断为所述指定字体未安装。
15.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述判断单元中当所述默认字体和所述指定字体的名称相同,则所述指定字体已安装,且所述指定字体与所述默认字体的字体相同。
16.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述判断单元还包括:
默认字体名称获取子单元,用于当所述默认字体数据和指定字体数据相同时,获取所述默认字体的名称;
字体名称比对子单元,用于将所述默认字体的名称与所述指定字体的名称比对。
17.根据权利要求16所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述默认字体名称获取子单元具体是,采用浏览器内置的应用程序编程接口获取所述默认字体和所述指定字体的名称。
18.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述文本填充单元中,当所述重叠区域为所述预设区域时,所述重叠区域为所述文本填充区域的部分区域;
相应的,所述像素数据获取单元具体用于,采集所述文本填充区域中的部分区域,所述部分区域为所述文本填充区域中预先设定的用于表征文本特征的部分。
19.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述像素数据获取单元包括:
区域范围确定子单元,用于确定所述重叠区域的区域范围;
扫描子单元,用于对所述区域范围内每个像素点进行逐个扫描;
数据获取子单元,用于获取每个像素点的像素数据。
20.根据权利要求19所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述数据获取子单元中具体是通过应用程序编程接口中的数据调用函数来获取重叠区域内每个像素点的像素数据。
21.根据权利要求19所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述像素数据是所述预设区域内每个像素点的RGBA值,其中R为红色通道参数值,G为绿色通道参数值,B为蓝色通道参数值,A为色彩的不透明度参数值。
22.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述预设图形绘制单元中绘制的预设图形是,在所述画布上绘制两个预设图形,形成两个预设区域;
相应的,所述文本填充单元具体用于在所述画布的两个文本填充区域分别采用默认字体和指定字体填充文本;
两个预设区域与两个文本填充区域分别形成两个重叠区域,所述像素数据获取单元具体用于同时获取两个重叠区域内的像素数据。
23.根据权利要求15所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述预设图形绘制单元中绘制的预设图形是,在所述画布上绘制一个预设图形,形成一个预设区域;
文本填充单元包括默认字体填充子单元和指定字体填充子单元,所述像素数据获取单元包括分别对应默认字体填充子单元和指定字体填充子单元的默认字体像素获取单元和指定字体像素获取单元;
所述默认字体填充子单元用于在所述画布上采用默认字体填充文本;
所述默认字体像素获取单元用于获取采用默认字体填充文本的所述重叠区域内的像素数据;
所述指定字体填充子单元用于在所述画布上采用指定字体填充文本;
所述指定字体像素获取单元用于获取采用指定字体填充文本的所述重叠区域内的像素数据。
24.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述文本填充单元具体是采用文本填充方法以默认字体和指定字体在画布上填充文本。
25.根据权利要求14所述的用于支持canvas的浏览器的检测字体的装置,其特征在于,所述画布创建单元具体是采用canvas图形容器和脚本命令生成画布。
CN201510187784.8A 2015-04-20 2015-04-20 一种用于支持canvas的浏览器的检测字体的方法和装置 Active CN106155728B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510187784.8A CN106155728B (zh) 2015-04-20 2015-04-20 一种用于支持canvas的浏览器的检测字体的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510187784.8A CN106155728B (zh) 2015-04-20 2015-04-20 一种用于支持canvas的浏览器的检测字体的方法和装置

Publications (2)

Publication Number Publication Date
CN106155728A CN106155728A (zh) 2016-11-23
CN106155728B true CN106155728B (zh) 2020-02-14

Family

ID=58058160

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510187784.8A Active CN106155728B (zh) 2015-04-20 2015-04-20 一种用于支持canvas的浏览器的检测字体的方法和装置

Country Status (1)

Country Link
CN (1) CN106155728B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111273982A (zh) * 2020-01-17 2020-06-12 北京字节跳动网络技术有限公司 操作系统的默认字体确认方法、装置、电子设备和介质
CN116643831B (zh) * 2023-07-27 2023-10-13 城云科技(中国)有限公司 Canvas绘制重叠文字的优化方法、装置及其应用

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103838607A (zh) * 2014-03-05 2014-06-04 天闻数媒科技(北京)有限公司 文本显示方法和装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103838607A (zh) * 2014-03-05 2014-06-04 天闻数媒科技(北京)有限公司 文本显示方法和装置

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
Detect Whether a Font is Installed;kirupa;《https://www.kirupa.com/html5/detect_whether_font_is_installed.htm》;20120901;第1-8页 *
How to know if a font(@font-face) has already been loaded?;Answered by Leeft;《https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded》;20140707;第1-11页 *
Test if a Font is Installed;Answered by Jeff Hillman;《https://stackoverflow.com/questions/113989/test-if-a-font-is-installed》;20130204;第1-6页 *

Also Published As

Publication number Publication date
CN106155728A (zh) 2016-11-23

Similar Documents

Publication Publication Date Title
CN105843494B (zh) 一种实现区域屏幕截图的方法、装置和终端
CN107885848B (zh) 基于web技术的网页截屏方法
CN107179889B (zh) 界面色彩调节方法、网页色彩调节方法及装置
US20150110419A1 (en) Method and device for image processing
US8761519B2 (en) System and method for selecting an object boundary in an image
CN113282488B (zh) 终端的测试方法及装置、存储介质、终端
CN111399831A (zh) 页面的展示方法和装置、存储介质、电子装置
CN111694493B (zh) 一种网页截图方法、计算机设备及可读存储介质
CN111476006B (zh) Pdf文件在线批注方法、装置、设备及可读存储介质
CN106155728B (zh) 一种用于支持canvas的浏览器的检测字体的方法和装置
US10311060B2 (en) Glyph management in texture atlases
CN110471700B (zh) 图形处理方法、装置、存储介质及电子设备
CN106920270B (zh) 动画处理方法和装置
CN112487328B (zh) 一种通用引导组件的实现方法、装置、电子设备和介质
CN107621951B (zh) 一种视图层级优化的方法及装置
CN108874392A (zh) 用户指引界面生成方法及装置
US8824806B1 (en) Sequential digital image panning
CN113762235A (zh) 检测页面叠加区域的方法和装置
CN115268904A (zh) 一种用户界面设计文件生成方法、装置、设备及介质
US9020272B1 (en) Sampling vector signed distance field using arc approximation
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN112416340A (zh) 基于草图的网页生成方法和系统
CN105260353A (zh) 一种移动终端的排版方法及装置
KR101189003B1 (ko) 만화콘텐츠 이미지파일을 모바일용 이미지파일로 변환하는 방법
CN111611151A (zh) 一种用户界面过度绘制的检测方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 1230740

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant