一种图像处理方法及客户端、存储介质与流程

1.本发明涉及图像处理技术领域，尤其涉及一种图像处理方法及客户端、存储介质。


背景技术：

2.在全球广域网(world wide web，web)应用当中，经常需要对图片中的纯色背景进行抠除，以展示图片后面的其他背景或内容，如在视频直播场景中，直播的视频内容是带有绿幕背景的原始视频，需要对绿幕背景进行抠除，以对视频内容进行背景替换、特效添加等处理。
3.现有技术中，是设计人员利用photoshop等图像处理软件将每一张图片中的背景抠除，在图片的数量大的情况下，延长了抠图的时间，降低了抠图时的速度。


技术实现要素：

4.为解决上述技术问题，本发明实施例期望提供一种图像处理方法及客户端、存储介质，能够提高抠图时的速度。
5.本发明的技术方案是这样实现的：
6.本技术实施例提供一种图像处理方法，应用于客户端，所述客户端包括抠图控件，所述图像处理方法包括：
7.获取待处理图像；并利用所述抠图控件提取所述待处理图像的像素信息；
8.从所述像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将所述第一像素信息对应的像素范围作为所述待处理图像中的待抠图范围；
9.提取所述待抠图范围对应的第一透明度；并将所述第一透明度调整为预设透明度，得到抠图图像。
10.本技术实施例提供了一种客户端，所述客户端包括抠图控件，所述客户端包括：
11.获取单元，用于获取待处理图像；
12.提取单元，用于利用所述抠图控件提取所述待处理图像的像素信息；提取待抠图范围对应的第一透明度；
13.筛选单元，用于从所述像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将所述第一像素信息对应的像素范围作为所述待处理图像中的所述待抠图范围；
14.调整单元，用于将所述第一透明度调整为预设透明度，得到抠图图像。
15.本技术实施例提供了一种客户端，所述客户端包括：
16.存储器、处理器和通信总线，所述存储器通过所述通信总线与所述处理器进行通信，所述存储器存储所述处理器可执行的图像处理的程序，当所述图像处理的程序被执行时，通过所述处理器执行上述所述的图像处理方法。
17.本技术实施例提供了一种存储介质，其上存储有计算机程序，应用于客户端，其特征在于，该计算机程序被处理器执行时实现上述所述的图像处理方法。
18.本发明实施例提供了一种图像处理方法及客户端、存储介质，图像处理方法应用
于客户端，客户端包括抠图控件，图像处理方法包括：获取待处理图像；并利用抠图控件提取待处理图像的像素信息；从像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围；提取待抠图范围对应的第一透明度；并将第一透明度调整为预设透明度，得到抠图图像。采用上述方法实现方案，通过在客户端中设置抠图控件，利用抠图控件提取到待处理图像的像素信息，使得客户端可以从像素信息中筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围，将待抠图范围的第一透明度调整为预设透明度，从而得到抠图图像，即使在待处理图像的数量大的情况下，客户端还是可以利用抠图控件快速的对待处理图像进行抠图处理，提高了对待处理图像进行抠图时的速度。
附图说明
19.图1为本技术实施例提供的一种图像处理方法流程图；
20.图2为本技术实施例提供的一种示例性的图像处理方法流程图；
21.图3为本技术实施例提供的一种客户端的组成结构示意图一；
22.图4为本技术实施例提供的一种客户端的组成结构示意图二。
具体实施方式
23.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
24.实施例一
25.本技术实施例提供了一种图像处理方法，图1为本技术实施例提供的一种图像处理方法流程图，如图1所示，图像处理方法可以包括：
26.s101、获取待处理图像；并利用抠图控件提取待处理图像的像素信息。
27.本技术实施例提供的一种图像处理方法适用于对待处理图像进行抠图的场景下。
28.在本技术实施例中，客户端可以以各种形式来实施。例如，本技术中描述的客户端可以包括诸如web客户端，也可以为其他的客户端，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
29.在本技术实施例中，图像处理方法应用于客户端，客户端包括抠图控件。
30.在本技术实施例中，抠图控件包括图片控件和视频控件。其中，图片控件用于对图像进行抠图处理并显示，视频控件用于对视频中的每一帧图像进行抠图处理并显示。
31.在本技术实施例中，图片控件与视频控件可以相同，图片控件与视频控件也可以不同，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
32.需要说明的是，抠图控件可以为canvas控件，也可以为其他的具有canvas控件功能的控件，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
33.在本技术实施例中，可以在web端页面上添加一个canvas控件，并为其设置id属性，以便在js脚本中获取。
34.在本技术实施例中，为了便于快捷的展示图片抠图后的效果，可以将web端页面上的原始图像控件或者视频控件进行隐藏处理，然后将canvas控件放置在原始图片或视频的
位置，并设置相同的宽高，以便用canvas来绘制抠图后的像素数据。
35.在本技术实施例中，若是对图像进行抠图，可以在图像的onload回调函数中，对图像进行抠图处理；若是对视频进行抠图，则可以在视频的timeupdate回调函数中，对视频中的每一帧图像进行抠图处理。
36.在本技术实施例中，待处理图像的像素信息具体是指多个像素信息，待处理图像中包括多个像素点，一个像素点对应一个像素信息，多个像素点对应多个像素信息。
37.在本技术实施例中，像素信息具体为rgb色值。
38.在本技术实施例中，待处理图像可以为web网页上的需要被显示的图像，也可以为直播视频中的每一帧图像，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
39.在本技术实施例中，客户端可以利用抠图控件来获取待处理图像，客户端也可以通过其他方式来获取待处理图像，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
40.在本技术实施例中，客户端获取待处理图像；并利用抠图控件提取待处理图像的像素信息的过程，包括：从客户端网页上获取待处理图像；客户端基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像；客户端利用抠图控件提取绘制图像的像素，得到像素信息。
41.在本技术实施例中，在本技术实施例中，客户端可以利用抠图控件从客户端网页上来获取待处理图像，客户端也可以通过其他方式来获取待处理图像，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
42.在本技术实施例中，预设初始位置可以为抠图控件的左上角的位置，也可以为抠图控件的中心位置，还可以为抠图控件中的任何位置，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
43.在本技术实施例中，客户端可以以抠图控件的左上角的位置作为预设初始位置，并确定待处理图像的宽和高，在该预设初始位置处，按照待处理图像的宽和高确定待处理图像的绘制区域，将该待处理图像绘制在画布的绘制区域中，从而得到抠图图像。
44.在本技术实施例中，调用context的drawimage(image,x,y)方法，二维绘图api提供了一种可以将web端页面上的图像内容绘制在canvas控件上的能力，参数image为要绘制的目标图像控件，参数image也可以是web端的视频控件，drawimage方法的参数x和参数y表示要将目标图像绘制在canvas控件上的坐标位置，此坐标系原点是左上角，可以设置为0，0。
45.需要说明的是，由于canvas可以绘制视频控件的内容，使得客户端可以对视频内容也进行抠图处理，并通过检测播放帧变化事件，使得在视频播放过程中，可以对每一帧的画面都进行处理，从而实现了视频的动态抠图效果。
46.在本技术实施例中，调用了context的drawimage方法后，此时web端页面的canvas控件上就已经显示了图片控件或视频控件的画面内容。客户端继续调用context的getimagedata(x,y,width,height)方法，二维绘图api提供了一种可以提取canvas控件当前显示内容的像素数据的能力，其中参数x、参数y表示要提取像素内容的起始点坐标，参数width、参数height表示要提取像素内容的宽度和高度。在对整个待处理图像的画面进行抠图处理的过程中，可以设置这几个参数的值为：0，0，canvas控件的宽度值，canvas控件的高
度值。二维绘图api方法被调用之后会返回一个包含canvas显示内容所有像素数据的数组。
47.需要说明的是，该数组中每四个值为一组，每一组表示一个像素点的r、g、b、a(alpha通道，即透明度)。
48.在本技术实施例中，客户端利用抠图控件提取绘制图像的像素，得到像素信息的过程，包括：在抠图控件的属性为可提取像素属性的情况下，利用抠图控件提取绘制图像的像素，得到像素信息。
49.在本技术实施例中，抠图控件的属性为抠图控件的crossorigin属性，在crossorigin属性的属性值为anonymous的情况下，抠图控件的属性为可提取像素属性。
50.可以理解的是，通过设置抠图控件的属性，使得抠图控件对跨域图片进行像素提取时不会受到浏览器的限制。
51.在本技术实施例中，设置crossorigin属性的属性值为anonymous的过程，可以为使用document的getelementbyid方法获取到已经渲染在web页面上的dom元素，然后访问其crossorigin属性并赋值为anonymous。
52.需要说明的是，如果是对视频图像进行抠图，同样需要对web端页面上的视频控件的属性设置为anonymous。
53.在本技术实施例中，客户端基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像之前，客户端还会确定抠图控件的绘图环境；相应的，客户端基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像的过程，包括：客户端在绘图环境下，基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像。
54.在本技术实施例中，绘图环境可以为2d的绘图环境，也可以为3d的绘图环境，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
55.在本技术实施例中，可以通过抠图控件的id，从js脚本中获取到canvas对象，然后通过getcontext(contextid)方法返回一个用于在画布上绘图的环境。参数contextid指定了要在画布上绘制的类型。当前唯一的合法值是"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图api。
56.在本技术实施例中，客户端利用抠图控件提取待处理图像的像素信息的过程，包括：客户端在检测到待处理图像加载完成事件的情况下，利用抠图控件提取待处理图像的像素信息；或者，客户端在检测到播放帧变化事件的情况下，利用抠图控件提取待处理图像的像素信息。
57.在本技术实施例中，在抠图控件具体为图片控件的情况下，客户端可以在获取待处理图像的过程中，检测待处理图像加载完成事件，在客户端检测到待处理图像加载完成事件的情况下，客户端就可以利用抠图控件提取待处理图像的像素信息。
58.在本技术实施例中，在抠图控件具体为视频控件的情况下，客户端可以在获取视频中的每一帧图像(待处理图像)的过程中，检测播放帧变化事件，在客户端检测到播放帧变化事件的情况下，客户端就可以利用抠图控件提取待处理图像的像素信息。
59.在本技术实施例中，在远程图片还没有加载完成时，客户端就无法获取到待处理图像中完整的像素信息，因此需要对远程图片的加载过程进行监听，客户端可以通过监听图片控件的加载完成onload事件，在客户端检测到加载完成onload事件的情况下，客户端
就可以确定出以获取到完整的待处理图像，之后客户端就可以利用抠图控件提取待处理图像的像素信息了。
60.在本技术实施例中，客户端监听图片控件的加载完成onload事件的过程，包括客户端获取待处理图像的dom对象，为待处理图像onload属性赋值一个回调函数以确保对图片的加载行为做准确的监听。
61.在本技术实施例中，如果是对视频图像进行抠图处理，则需要监听视频控件的播放帧变化事件timeupdate。
62.需要说明的是，播放帧变化事件timeupdate表示视频的当前帧发生了变化(视频画面变化了)，客户端需要在每次视频画面发生变化时，都要对这一帧视频图像进行抠图处理。
63.在本技术实施例中，客户端监听视频控件的播放帧变化事件timeupdate的过程，包括获取视频图像的dom对象，为视频图像timeupdate属性赋值一个回调函数以确保对视频的画面变化做准确的监听。
64.s102、从像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围。
65.在本技术实施例中，客户端获取待处理图像；并利用抠图控件提取待处理图像的像素信息之后，客户端就可以从像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围了。
66.在本技术实施例中，预设像素阈值范围可以为客户端第一像素信息对应的像素阈值范围。
67.示例性的，绿色为待处理图像中要抠除的颜色，绿色的rgb色值(目标色值)分别为：r为0，g为255，b为0，若绿色的目标色阈值为10，则客户端就在该rgb色值的基础上加减10，得到对应的像素阈值范围，即对应的绿色的像素信息阈值范围：r为0
‑
10，g为245
‑
255，b为0
‑
10，即客户端会将待处理图像中像素的rgb色值在绿色的像素信息阈值范围的像素信息都确定为绿色。
68.需要说明的是，rgb色值的最大值为255，最小值为0，故在r为0的基础上加减10之后，r的范围为0
‑
10；在g为255的基础上加减10之后，g的范围为245
‑
255；在b为0的基础上加减10之后，b的范围为0
‑
10。
69.在本技术实施例中，客户端可以根据目标色值指令，确定出要抠除的目标rgb色值，如要抠除的为绿色，绿色的rgb色值分别为：r为0，g为255，b为0。
70.在本技术实施例中，由于待处理图像拍摄时的光线、画质等原因使得待处理图像的图像像素色值不可能绝对等于目标色值，因此需要设置一个目标色值范围(预设像素阈值范围)，只要在这个范围内的像素点都属于可抠除像素。
71.需要说明的是，目标色阈值为大于0的整数，阈值可以是10～32之间的任一个数值。
72.s103、提取待抠图范围对应的第一透明度；并将第一透明度调整为预设透明度，得到抠图图像。
73.在本技术实施例中，客户端从像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围之后，客户
端就可以提取待抠图范围对应的第一透明度；并将第一透明度调整为预设透明度，得到抠图图像了。
74.需要说明的是，预设透明度为透明度值为0时的透明度。
75.在本技术实施例中，客户端将待抠图范围的透明度调整为预设透明度之后，客户端就将待处理图像中的待抠图范围抠除了，从而得到了抠图图像。
76.在本技术实施例中，第一透明度可以为待抠图范围对应的alpha通道的值。
77.在本技术实施例中，客户端将第一透明度调整为预设透明度，得到抠图图像之后，客户端还会显示该抠图图像。
78.在本技术实施例中，客户端在抠图控件上将绘制图像中的待抠图范围抠除之后，即客户端得到抠图图像之后，客户端就可以直接显示该抠图图像了；客户端也可以在得到抠图图像之后，直接在该绘制图像中的待抠图范围中添加其他的图像进行合成，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
79.在本技术实施例中，通过调用context的putimagedata(imagedata,x,y)方法，将处理完成的像素数组传递给参数imagedata，参数x和参数y表示起始坐标，直接传递0，0即可。这个api会将canvas显示的内容重新渲染为参数imagedata里的像素数据，因此，web端的canvas控件将显示为目标色值呈现完全透明的效果，即显示抠图图像。
80.本技术实施例提供了一种示例性的图像处理方法，如图2所示：
81.1、客户端从网页上获取待处理图像。
82.需要说明的是，该网页具体为客户端网页。
83.2、在检测到待处理图像加载完成事件的情况下，客户端基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像。
84.3、在检测到播放帧变化事件的情况下，客户端基于抠图控件中的预设初始位置，将待处理图像绘制在抠图控件的画布上，得到绘制图像。
85.在本技术实施例中，客户端在执行了步骤1之后，可以直接执行步骤2；客户端在执行了步骤1之后，也可以直接执行步骤3，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
86.4、客户端利用抠图控件提取绘制图像的像素，得到像素信息。
87.5、客户端从像素信息中，筛选出满足预设像素阈值范围的第一像素信息。
88.6、客户端将第一像素信息对应的像素范围作为待处理图像中的待抠图范围。
89.7、客户端提取待抠图范围对应的第一透明度。
90.8、客户端将第一透明度调整为预设透明度，得到抠图图像。
91.9、客户端显示抠图图像。
92.在本技术实施例中，客户端可以利用抠图控件来显示该抠图图像，客户端也可以利用其他的方式来显示该抠图图像，具体的可根据实际情况进行确定，本技术实施例对此不作限定。
93.可以理解的是，通过在客户端中设置抠图控件，利用抠图控件提取到待处理图像的像素信息，使得客户端可以从像素信息中筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围，将待抠图范围的第一透明度调整为预设透明度，从而得到抠图图像，即使在待处理图像的数量大的情况下，
客户端还是可以利用抠图控件快速的对待处理图像进行抠图处理，提高了对待处理图像进行抠图时的速度。
94.实施例二
95.基于实施例一同一发明构思，本技术实施例提供了一种客户端1，对应于一种图像处理方法；客户端包括抠图控件，图3为本技术实施例提供的一种客户端的组成结构示意图一，该客户端1可以包括：
96.获取单元11，用于获取待处理图像；
97.提取单元12，用于利用所述抠图控件提取所述待处理图像的像素信息；提取待抠图范围对应的第一透明度；
98.筛选单元13，用于从所述像素信息中，筛选出满足预设像素阈值范围的第一像素信息，并将所述第一像素信息对应的像素范围作为所述待处理图像中的所述待抠图范围；
99.调整单元14，用于将所述第一透明度调整为预设透明度，得到抠图图像。
100.在本技术的一些实施例中，所述客户端还包括绘制单元；
101.所述获取单元11，用于从客户端网页上获取所述待处理图像；
102.所述绘制单元，用于基于所述抠图控件中的预设初始位置，将所述待处理图像绘制在所述抠图控件的画布上，得到绘制图像；
103.所述提取单元12，用于利用所述抠图控件提取所述绘制图像的像素，得到所述像素信息。
104.在本技术的一些实施例中，所述提取单元12，用于在所述抠图控件的属性为可提取像素属性的情况下，利用所述抠图控件提取所述绘制图像的像素，得到所述像素信息。
105.在本技术的一些实施例中，所述提取单元12，用于在检测到所述待处理图像加载完成事件的情况下，利用所述抠图控件提取所述待处理图像的像素信息；或者，在检测到播放帧变化事件的情况下，利用所述抠图控件提取所述待处理图像的像素信息。
106.在本技术的一些实施例中，所述客户端还包括确定单元；
107.所述确定单元，用于确定所述抠图控件的绘图环境；
108.相应的，所述绘制单元，用于在所述绘图环境下，基于所述抠图控件中的预设初始位置，将所述待处理图像绘制在所述抠图控件的画布上，得到绘制图像。
109.在本技术的一些实施例中，所述像素信息为rgb色值。
110.在本技术的一些实施例中，所述客户端还包括显示单元；
111.所述显示单元，用于显示所述抠图图像。
112.需要说明的是，在实际应用中，上述获取单元11、提取单元12、筛选单元13和调整单元14可由客户端1上的处理器15实现，具体为cpu(central processing unit，中央处理器)、mpu(microprocessor unit，微处理器)、dsp(digital signal processing，数字信号处理器)或现场可编程门阵列(fpga，field programmable gate array)等实现；上述数据存储可由客户端1上的存储器16实现。
113.本发明实施例还提供了一种客户端1，如图4所示，所述客户端1包括：处理器15、存储器16和通信总线17，所述存储器16通过所述通信总线17与所述处理器15进行通信，所述存储器16存储所述处理器15可执行的程序，当所述程序被执行时，通过所述处理器15执行如上述所述的图像处理方法。
114.在实际应用中，上述存储器16可以是易失性存储器(volatile memory)，例如随机存取存储器(random
‑
access memory，ram)；或者非易失性存储器(non
‑
volatile memory)，例如只读存储器(read
‑
only memory，rom)，快闪存储器(flash memory)，硬盘(hard disk drive，hdd)或固态硬盘(solid
‑
state drive，ssd)；或者上述种类的存储器的组合，并向处理器15提供指令和数据。
115.本发明实施例提供了一种计算机可读存储介质，其上有计算机程序，所述程序被处理器15执行时实现如上述所述的图像处理方法。
116.可以理解的是，通过在客户端中设置抠图控件，利用抠图控件提取到待处理图像的像素信息，使得客户端可以从像素信息中筛选出满足预设像素阈值范围的第一像素信息，并将第一像素信息对应的像素范围作为待处理图像中的待抠图范围，将待抠图范围的第一透明度调整为预设透明度，从而得到抠图图像，即使在待处理图像的数量大的情况下，客户端还是可以利用抠图控件快速的对待处理图像进行抠图处理，提高了对待处理图像进行抠图时的速度。
117.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
118.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
119.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
120.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
121.以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。