KR102238812B1 - Appratus and method for providing image from search result page displayed by web browser - Google Patents
Appratus and method for providing image from search result page displayed by web browser Download PDFInfo
- Publication number
- KR102238812B1 KR102238812B1 KR1020170084974A KR20170084974A KR102238812B1 KR 102238812 B1 KR102238812 B1 KR 102238812B1 KR 1020170084974 A KR1020170084974 A KR 1020170084974A KR 20170084974 A KR20170084974 A KR 20170084974A KR 102238812 B1 KR102238812 B1 KR 102238812B1
- Authority
- KR
- South Korea
- Prior art keywords
- image
- area
- scene
- search result
- result page
- Prior art date
Links
- 238000000034 method Methods 0.000 title claims description 42
- 238000001514 detection method Methods 0.000 claims abstract description 14
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 238000000605 extraction Methods 0.000 claims abstract description 7
- 239000000284 extract Substances 0.000 claims description 6
- 238000013507 mapping Methods 0.000 claims description 5
- 230000000007 visual effect Effects 0.000 claims 1
- 238000010586 diagram Methods 0.000 description 15
- 230000008569 process Effects 0.000 description 10
- 238000004891 communication Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000003384 imaging method Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- RYGMFSIKBFXOCR-UHFFFAOYSA-N Copper Chemical compound [Cu] RYGMFSIKBFXOCR-UHFFFAOYSA-N 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 150000001875 compounds Chemical class 0.000 description 1
- 229910052802 copper Inorganic materials 0.000 description 1
- 239000010949 copper Substances 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000001483 mobilizing effect Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
- 238000002604 ultrasonography Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
- G06Q50/10—Services
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/10—Geometric effects
- G06T15/20—Perspective computation
- G06T15/205—Image-based rendering
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/10—Segmentation; Edge detection
- G06T7/11—Region-based segmentation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/90—Determination of colour characteristics
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Business, Economics & Management (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Tourism & Hospitality (AREA)
- Health & Medical Sciences (AREA)
- Marketing (AREA)
- Geometry (AREA)
- Computing Systems (AREA)
- Economics (AREA)
- General Health & Medical Sciences (AREA)
- Human Resources & Organizations (AREA)
- Computer Graphics (AREA)
- Primary Health Care (AREA)
- Strategic Management (AREA)
- General Business, Economics & Management (AREA)
- Human Computer Interaction (AREA)
- General Engineering & Computer Science (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 장치는 상기 검색 결과 페이지를 웹 뷰에 로드하는 로드부, 상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 추출부, 상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 렌더링부, 상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 영역 검출부, 상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 결합 영역을 생성하는 영역 결합부 및 결합 영역과 비결합 영역을 화면 단위로 표시하는 표시부를 포함한다. An apparatus for providing an image from a search result page displayed on a web browser includes a loading unit for loading the search result page into a web view, an extraction unit for extracting at least one image extracted from the loaded search result page, and the extracted image A rendering unit that renders the image on the canvas of the web view, an area detection unit that separates and detects at least one background area and a scene area from the canvas on which the image is rendered, and the detected scene area cannot be combined with a combined area that can be combined. A region combining unit that is divided into a non-coupled area and generates a combined area, and a display unit that displays the combined area and the non-coupled area in a screen unit.
Description
본 발명은 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 장치 및 방법에 관한 것이다. The present invention relates to an apparatus and method for providing an image from a search result page displayed on a web browser.
웹툰이란 웹(web)과 카툰(cartoon)의 합성어로, 각종 멀티미디어 효과를 동원하여 제작된 인터넷 만화를 말한다. 웹툰은 단순히 만화책을 스캔하여 게재하는 온라인상의 만화가 아닌, 영상과 음성더빙, 플래시 기법 등을 이용하여 제작된 영상 애니메이션으로, 등장인물들의 대사, 배경음악 등이 함께 나옴으로써, 만화영화나 만화비디오를 보는 듯한 느낌을 제공한다. Webtoon is a compound word of web and cartoon, and refers to Internet cartoons produced by mobilizing various multimedia effects. Webtoon is not an online cartoon that simply scans and publishes a comic book, but is a video animation produced using video, audio dubbing, and flash techniques. It provides the feeling of seeing.
이러한 웹툰은 PC, 모바일, 태블릿 PC, TV를 통해 시청할 수 있으며, 웹툰이 단말을 통해 제공되는 기술과 관련하여 선행기술인 한국공개특허 제 2016-0017982호는 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램을 개시하고 있다. These webtoons can be viewed through PCs, mobiles, tablet PCs, and TVs, and Korean Patent Laid-Open No. 2016-0017982, which is a prior art, related to the technology that webtoons are provided through terminals. Disclosed is a computer program for execution.
웹툰은 웹을 기반으로 제작된 인터넷 만화로, 사용자 단말의 화면에 따라 웹툰의 이미지가 분할되어 표시될 수 있다. 그러나 사용자 단말의 화면을 고려하여 웹툰 이미지를 분할하여 표시하는 경우, 웹툰의 내용이 고려되지 않는다는 단점을 가지고 있다. A webtoon is an internet cartoon produced based on the web, and an image of a webtoon may be divided and displayed according to a screen of a user terminal. However, when the webtoon image is divided and displayed in consideration of the screen of the user terminal, the content of the webtoon is not considered.
종래의 스크롤에 최적화된 웹툰 이미지를 비교 분석하여, 물리적으로 웹툰 이미지의 장면 영역을 결합시킴으로써, 웹툰 이미지가 슬라이드 형태로 표시되도록 하는 이미지 제공 장치 및 방법을 제공하고자 한다. 종래의 PC, 스마트폰, 태블릿 PC 등의 화면에 최적화된 웹툰 이미지를 물리적으로 가공시킴으로써, 음성 인터페이스 기반의 미디어 제공 장치에서도 최적화된 웹툰 이미지를 제공하는 이미지 제공 장치 및 방법을 제공하고자 한다. 다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제들로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다. An image providing apparatus and method for displaying webtoon images in a slide form by comparing and analyzing webtoon images optimized for conventional scrolling and physically combining scene regions of webtoon images. It is intended to provide an image providing device and method for providing an optimized webtoon image even in a media providing device based on a voice interface by physically processing webtoon images optimized for screens of conventional PCs, smartphones, and tablet PCs. However, the technical problem to be achieved by the present embodiment is not limited to the technical problems as described above, and other technical problems may exist.
상술한 기술적 과제를 달성하기 위한 수단으로서, 본 발명의 일 실시예는, 검색 결과 페이지를 웹 뷰에 로드하는 로드부, 상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 추출부, 상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 렌더링부, 상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 영역 검출부, 상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 영역 결합부 및 상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 표시부를 포함하는 이미지 제공 장치를 제공할 수 있다. As a means for achieving the above-described technical problem, an embodiment of the present invention includes a loading unit for loading a search result page into a web view, an extraction unit for extracting at least one image extracted from the loaded search result page, A rendering unit that renders the extracted image on the canvas of the web view, an area detection unit that separates and detects at least one background area and a scene area from the canvas on which the image is rendered, and a combined area capable of combining the detected scene area It is possible to provide an image providing apparatus including an area combining unit that divides into a non-combined area that cannot be combined with and generates the combined area, and a display unit that displays the combined area and the non-combined area in screen units.
본 발명의 다른 실시예는, 상기 검색 결과 페이지를 웹 뷰에 로드하는 단계, 상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 단계, 상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 단계, 상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 단계, 상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 단계 및 상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 단계를 포함하는 이미지 제공 방법을 제공할 수 있다. In another embodiment of the present invention, loading the search result page into a web view, extracting at least one image extracted from the loaded search result page, rendering the extracted image on the canvas of the web view And detecting at least one background area and a scene area separately from the canvas on which the image is rendered, dividing the detected scene area into a combined area that can be combined and a non-combined area that cannot be combined, and the combined area It is possible to provide an image providing method including generating and displaying the combined area and the non-combined area in a screen unit.
상술한 과제 해결 수단은 단지 예시적인 것으로서, 본 발명을 제한하려는 의도로 해석되지 않아야 한다. 상술한 예시적인 실시예 외에도, 도면 및 발명의 상세한 설명에 기재된 추가적인 실시예가 존재할 수 있다.The above-described problem solving means are merely exemplary and should not be construed as limiting the present invention. In addition to the above-described exemplary embodiments, there may be additional embodiments described in the drawings and detailed description of the invention.
전술한 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 종래의 스크롤에 최적화된 웹툰 이미지를 비교 분석하여, 물리적으로 웹툰 이미지의 장면 영역을 결합시킴으로써, 웹툰 이미지가 슬라이드 형태로 표시되도록 하는 이미지 제공 장치 및 방법을 제공할 수 있다. 종래의 PC, 스마트폰, 태블릿 PC 등의 화면에 최적화된 웹툰 이미지를 물리적으로 가공시킴으로써, 음성 인터페이스 기반의 미디어 제공 장치에서도 최적화된 웹툰 이미지를 제공하는 이미지 제공 장치 및 방법을 제공할 수 있다.According to any one of the above-described problem solving means of the present invention, an image providing device that compares and analyzes webtoon images optimized for conventional scrolling and physically combines scene regions of webtoon images to display webtoon images in a slide form. And a method. By physically processing webtoon images optimized for screens of conventional PCs, smartphones, tablet PCs, etc., an image providing apparatus and method for providing an optimized webtoon image even in a media providing apparatus based on a voice interface can be provided.
도 1은 본 발명의 일 실시예에 따른 이미지 제공 시스템의 구성도이다.
도 2a 및 도 2b는 종래의 웹툰 이미지를 도시한 예시적인 도면이다.
도 3는 본 발명의 일 실시예에 따른 이미지 제공 장치의 구성도이다.
도 4a 내지 도 4d는 본 발명의 일 실시예에 따른 웹툰 이미지로부터 검출된 장면 영역을 화면 단위로 표시하는 과정을 설명하기 위한 예시적인 도면이다.
도 5a 및 도 5b는 본 발명의 일 실시예에 따른 장면 전환에 따라 스크롤링하는 과정을 설명하기 위한 예시적인 도면이다.
도 6a 내지 도 6c는 본 발명의 일 실시예에 따른 장면 영역을 슬라이드 형태로 표시하는 과정을 설명하기 위한 예시적인 도면이다.
도 7은 본 발명의 일 실시예에 따른 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법의 순서도이다. 1 is a block diagram of an image providing system according to an embodiment of the present invention.
2A and 2B are exemplary views showing a conventional webtoon image.
3 is a block diagram of an image providing apparatus according to an embodiment of the present invention.
4A to 4D are exemplary views for explaining a process of displaying a scene area detected from a webtoon image in a screen unit according to an embodiment of the present invention.
5A and 5B are exemplary diagrams for explaining a scrolling process according to a scene change according to an embodiment of the present invention.
6A to 6C are exemplary views for explaining a process of displaying a scene area in a slide form according to an exemplary embodiment of the present invention.
7 is a flowchart of a method of providing an image from a search result page displayed on a web browser in an image providing device according to an embodiment of the present invention.
아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다. Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings so that those of ordinary skill in the art can easily implement the present invention. However, the present invention may be implemented in various different forms and is not limited to the embodiments described herein. In the drawings, parts irrelevant to the description are omitted in order to clearly describe the present invention, and similar reference numerals are attached to similar parts throughout the specification.
명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미하며, 하나 또는 그 이상의 다른 특징이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다. Throughout the specification, when a part is said to be "connected" with another part, this includes not only "directly connected" but also "electrically connected" with another element interposed therebetween. . In addition, when a part "includes" a certain component, it means that other components may be further included, and one or more other features, not excluding other components, unless specifically stated to the contrary. It is to be understood that it does not preclude the presence or addition of any number, step, action, component, part, or combination thereof.
본 명세서에 있어서 '부(部)'란, 하드웨어에 의해 실현되는 유닛(unit), 소프트웨어에 의해 실현되는 유닛, 양방을 이용하여 실현되는 유닛을 포함한다. 또한, 1 개의 유닛이 2 개 이상의 하드웨어를 이용하여 실현되어도 되고, 2 개 이상의 유닛이 1 개의 하드웨어에 의해 실현되어도 된다.In the present specification, the term "unit" includes a unit realized by hardware, a unit realized by software, and a unit realized using both. Further, one unit may be realized by using two or more hardware, or two or more units may be realized by one piece of hardware.
본 명세서에 있어서 단말 또는 디바이스가 수행하는 것으로 기술된 동작이나 기능 중 일부는 해당 단말 또는 디바이스와 연결된 서버에서 대신 수행될 수도 있다. 이와 마찬가지로, 서버가 수행하는 것으로 기술된 동작이나 기능 중 일부도 해당 서버와 연결된 단말 또는 디바이스에서 수행될 수도 있다.In this specification, some of the operations or functions described as being performed by the terminal or device may be performed instead in a server connected to the terminal or device. Likewise, some of the operations or functions described as being performed by the server may also be performed by a terminal or device connected to the server.
이하 첨부된 도면을 참고하여 본 발명의 일 실시예를 상세히 설명하기로 한다. Hereinafter, an embodiment of the present invention will be described in detail with reference to the accompanying drawings.
도 1은 본 발명의 일 실시예에 따른 이미지 제공 시스템의 구성도이다. 도 1을 참조하면, 이미지 제공 시스템(1)은 이미지 제공 장치(110), 디스플레이 장치(120), 리모트 컨트롤러(130) 및 서버(140)를 포함할 수 있다. 이미지 제공 장치(110), 디스플레이 장치(120), 리모트 컨트롤러(130) 및 서버(140)는 이미지 제공 시스템(1)에 의하여 제어될 수 있는 구성요소들을 예시적으로 도시한 것이다. 1 is a block diagram of an image providing system according to an embodiment of the present invention. Referring to FIG. 1, the
도 1의 이미지 제공 시스템(1)의 각 구성요소들은 일반적으로 네트워크(network)를 통해 연결된다. 예를 들어, 도 1에 도시된 바와 같이, 디스플레이 장치(120)는 이미지 제공 장치(110)와 동시에 또는 시간 간격을 두고 연결될 수 있다. Each component of the
네트워크는 단말들 및 서버들과 같은 각각의 노드 상호 간에 정보 교환이 가능한 연결 구조를 의미하는 것으로, 근거리 통신망(LAN: Local Area Network), 광역 통신망(WAN: Wide Area Network), 인터넷 (WWW: World Wide Web), 유무선 데이터 통신망, 전화망, 유무선 텔레비전 통신망 등을 포함한다. 무선 데이터 통신망의 일례에는 3G, 4G, 5G, 3GPP(3rd Generation Partnership Project), LTE(Long Term Evolution), WIMAX(World Interoperability for Microwave Access), 와이파이(Wi-Fi), 블루투스 통신, 적외선 통신, 초음파 통신, 가시광 통신(VLC: Visible Light Communication), 라이파이(LiFi) 등이 포함되나 이에 한정되지는 않는다. A network refers to a connection structure that enables information exchange between nodes such as terminals and servers, and is a local area network (LAN), a wide area network (WAN), and the Internet (WWW: World). Wide Web), wired and wireless data communication networks, telephone networks, wired and wireless television networks, etc. Examples of wireless data networks include 3G, 4G, 5G, 3GPP (3rd Generation Partnership Project), LTE (Long Term Evolution), WIMAX (World Interoperability for Microwave Access), Wi-Fi, Bluetooth communication, infrared communication, and ultrasound. Communication, Visible Light Communication (VLC), LiFi, and the like are included, but are not limited thereto.
이미지 제공 장치(110)는 음성 인식 기술이 구비된 장치로, 지능형 개인 비서 기능을 탑재하고 있으며, 사용자로부터 음성 명령을 입력받으면, 음성 명령에 대한 응답으로 TV 제어, 인터넷 검색, 전화 걸기, 길안내 등의 서비스를 수행하고, 서비스 수행 결과를 TV 화면을 통해 출력하는 장치일 수 있다. 이러한 이미지 제공 장치(110)는 서비스 수행 결과를 디스플레이 장치(120)를 통해 출력함으로써, 시각적으로 서비스에 대한 자세한 정보를 제공하는 특징을 가지고 있다. The
이미지 제공 장치(110)는 내장된 음성 인식 모듈 또는 외부 입력 장치를 통해 사용자(115)의 음성 명령으로, 웹 브라우저의 검색을 요청받을 수 있다. 예를 들어, 디스플레이 장치(120)는 사용자(115)의 음성 입력 또는 리모트 컨트롤러(130)를 통해 사용자로부터 마우스 커서의 이동 및 선택으로 웹 브라우저의 검색을 요청받을 수 있다. The
이미지 장치(110)는 이미지 장치(110)에서 실행된 웹 브라우저는 서버(140)로부터 수신한 검색 결과 페이지를 웹 뷰에 로드할 수 있다. 로드된 검색 결과 페이지에 적어도 하나의 이미지가 포함되어 있는 경우, 이미지 장치(110)는 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출할 수 있다. The
이미지 장치(110)는 추출된 이미지를 웹 뷰의 캔버스에 렌더링하고, 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출할 수 있다. 이 후, 이미지 장치(110)는 장면 영역을 화면 단위로 표시할 수 있다. 예를 들어, 캔버스는 픽셀 단위의 이미지를 처리 및 가공할 수 있도록 하는 컴퍼넌트일 수 있다.The
이미지 장치(110)는 적어도 하나 이상의 웹 뷰를 사용하여 각 페이지를 출력/로드/렌더링하도록 할 수 있다. 예를 들어, 이미지 장치(110)는 검색 결과 페이지를 로드하기 위해 제 1 웹 뷰를 사용하고, 추출된 이미지를 캔버스에 렌더링하기 위해 제 2 웹 뷰를 사용하고, 장면 영역을 표시하기 위해 제 3 웹 뷰(웹 뷰가 아니라 일반적인 뷰도 적용 가능)를 사용할 수 있다. 즉, 본원 발명은 각 페이지를 하나의 웹 뷰에 중첩적으로 출력/로드/렌더링할 수 있고, 각 페이지를 각각의 웹 뷰(또는 일반적인 뷰)를 통해 복 수개의 레이어로서 로드 또는 렌더링할 수 있다. 이 경우, 본원 발명은 이미지 제공 장치(110)의 리소스 등을 고려하여 최적화된 수의 웹 뷰를 사용할 수 있다.The
디스플레이 장치(120)는 이미지 제공 장치(110)를 통해 수행되는 모든 기능을 시각적으로 표시할 수 있다. 예를 들어, 디스플레이 장치(120)는 이미지 제공 장치(110)에 의해 처리된 검색 결과 페이지 및 포커스 UI를 표시할 수 있다.The
서버(140)는 IPTV 서버, 음성 인식 서버 등을 포함할 수 있다. IPTV 서버는 이미지 제공 장치(110)에서 사용자(115)로부터 음성 명령 또는 리모트 컨트롤러(130)를 통해 서비스 요청을 입력받은 경우, 해당 요청에 대응하는 서비스를 제공할 수 있다. 예를 들어, IPTV 서버는 웹툰 서비스, 인터넷 검색, 컨텐츠 검색, 길안내 등의 서비스를 이미지 제공 장치(110)로 제공할 수 있다. 음성 인식 서버는 이미지 제공 장치(110)를 통해 사용자(115)로부터 음성 명령을 입력받은 경우, STT(Speech To Text) 기법을 이용하여 입력된 음성 명령을 텍스트로 변환한 후, 해당 음성 명령에 대한 변환된 텍스트를 이미지 제공 장치(110)로 제공할 수 있다. The
도 2a 및 도 2b는 종래의 웹툰 이미지를 도시한 예시적인 도면이다. 2A and 2B are exemplary views showing a conventional webtoon image.
도 2a는 PC(Personal Computer)의 웹 브라우저를 통해 디스플레이된 웹툰 이미지를 도시한 화면이다. 도 2a를 참조하면, PC에서 웹툰이 게시되는 URL에 접속하면, 웹툰 이미지가 PC의 화면에 최적화되어 디스플레이된다. 2A is a screen showing a webtoon image displayed through a web browser of a personal computer (PC). Referring to FIG. 2A, when a PC accesses a URL where a webtoon is posted, a webtoon image is optimized and displayed on the screen of the PC.
도 2b는 웹툰 이미지를 도시한 화면이다. 도 2b를 참조하면, 웹 브라우저를 통해 디스플레이되는 웹툰 이미지의 실제 이미지는 장면 간의 구분과 상관 없이 각 이미지 파일의 용량 별로 구분되어 있다. 2B is a screen showing a webtoon image. Referring to FIG. 2B, actual images of webtoon images displayed through a web browser are classified according to the size of each image file regardless of the division between scenes.
따라서, 본 발명에서는 웹툰 이미지에 물리적인 수정을 가하여 웹툰의 내용또는 장면 간의 구성을 고려하는 동시에, 웹툰 이미지가 음성 인터페이스 기반의 장치에 최적화되어 출력되도록 할 수 있다. 한편, 본 발명은 웹툰 이미지뿐만 아니라 원본 이미지 간의 구분이 내용 또는 장면과 관계없이 되어 있어서, 물리적인 수정을 통해 내용의 구분 및 장면 간의 구분이 필요한 이미지에 대해서라면 모두 적용될 수 있다. Accordingly, in the present invention, the content of the webtoon or the composition between scenes may be considered by physically modifying the webtoon image, and the webtoon image may be optimized and output in an audio interface-based device. Meanwhile, in the present invention, since the distinction between the original image as well as the webtoon image is irrespective of the content or the scene, it can be applied to any image that requires distinction of content and between scenes through physical modification.
도 3은 본 발명의 일 실시예에 따른 이미지 제공 장치의 구성도이다. 도 3을 참조하면, 이미지 제공 장치(110)는 로드부(310), 추출부(320), 렌더링부(330), 영역 검출부(340), 영역 결합부(350), 표시부(360), 매핑부(370) 및 스크롤링부(380)를 포함할 수 있다. 3 is a block diagram of an image providing apparatus according to an embodiment of the present invention. Referring to FIG. 3, the
로드부(310)는 검색 결과 페이지를 웹 뷰에 로드할 수 있다. 예를 들어, 사용자가 특정 웹툰을 보고자 하는 경우, 로드부(310)는 사용자의 요청에 의해 해당 웹툰을 검색한 검색 결과 페이지(html)를 웹 뷰에 로드할 수 있다. 이 때, 웹 뷰는 사용자에게 시각적으로 노출되지 않는 것일 수 있다. The
추출부(320)는 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출할 수 있다. 예를 들어, 추출부(320)는 검색 결과 페이지에 포함된 선택자에 기초하여 이미지를 추출하고, 추출된 이미지의 경로를 나타내는 이미지의 URL을 렌더링부(330)로 전달할 수 있다. 이 때, 검색 결과 페이지에 포함된 선택자가 존재하지 않는 경우, 검색 결과 페이지 내에서 기설정된 영역 이상을 차지하는 이미지 및 이미지와 동일한 뎁스(depth)와 구조를 가지는 노드에 기초하여 이미지를 추출할 수 있다. 선택자(selector)는, 검색 결과 페이지에 대응하는 웹 문서의 소스코드로부터 수집될 수 있으며, 예를 들어, 웹 문서를 구성하는 각 엘리먼트에 해당하는 '#rso', '.srg', '.mnr-c' 등의 문자를 포함할 수 있다. The
렌더링부(330)는 추출된 이미지를 웹 뷰의 캔버스에 렌더링할 수 있다. 예를 들어, 렌더링부(330)는 추출된 이미지의 URL에 기초하여 검색 결과 페이지에서의 실제 배치 순서에 따라 추출된 이미지를 캔버스에 렌더링할 수 있다. 렌더링부(330)는 캔버스에 추출된 이미지의 렌더링이 완료되면, 해당 캔버스의 크기 및 픽셀 구성 정보를 영역 검출부(340)로 전달할 수 있다. The
영역 검출부(340)는 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출할 수 있다. The
구체적으로, 영역 검출부(340)는 렌더링된 이미지로부터 빈도수가 높은 컬러를 배경색으로 선정하고, 배경색에 기초하여 배경 영역 및 장면 영역을 검출할 수 있다. 예를 들어, 영역 검출부(340)는 이미지의 최우측 및 최좌측 열 전체의 컬러 코드에 대해 빈도수가 가장 높은 컬러를 배경색으로 선정할 수 있다. Specifically, the
또한, 영역 검출부(340)는 렌더링된 이미지를 픽셀 행 단위로 분석하여 배경색으로만 구성되는 영역을 배경 영역으로 검출하고, 렌더링된 이미지 중 배경 영역에 해당하지 않는 적어도 하나의 픽셀 행을 장면 영역으로 검출할 수 있다. In addition, the
예를 들어, 영역 검출부(340)는 렌더링된 이미지 전체에 대해 [세로1px*가로 전체]를 분석 대상으로 선정하고, 분석 대상이 배경색으로만 구성되어 있는 경우, 영역 검출부(340)는 분석 대상을 배경색으로 구성되는 영역을 배경 영역으로 검출하여 배열 정보에 포함시킬 수 있다. 이 때, 연속되는 다음 행이 배경 영역인 경우, 영역 검출부(340)는 하나의 배경 영역으로 인지하여 기존의 배열 정보를 수정할 수 있다. For example, the
영역 결합부(350)는 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 결합 영역을 생성할 수 있다. The
영역 결합부(350)는 검색 결과 페이지에 따라 검출된 장면 영역을 인덱싱하여 배열시키고, 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단할 수 있다. The
예를 들어, 영역 결합부(350)는 장면 영역 간의 결합이 되어 있지 않은 것으로 판단한 경우, 비교 대상 영역(예를 들어, 결합하기 전의 장면 영역)의 간격이 전체 배경 간격보다 작을 경우 및 결합 후 이미지가 재생 화면을 초과하지 않는 경우에 대해 장면 영역 간의 결합을 수행할 수 있다. 이 때, 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 영역 결합부(350)는 이미지 제공 장치(110)의 화면 크기에 기초하여 인접하는 장면 영역 및 배경 영역을 결합할 수 있다. 예를 들면, 영역 결합부(350)는 이전 장면 영역과 다음 장면 영역, 그리고 그 사이의 배경 영역을 결합하더라도 이미지 제공 장치(110)의 화면을 벗어나지 않는 경우, 인접하는 장면 영역 및 배경 영역을 결합할 수 있다. For example, when the
또한, 영역 결합부(350)는 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 인접하는 장면 영역 및 배경 영역을 결합할 수 있다. 예를 들어, 영역 결합부(350)는 인접하는 장면 영역 사이에 위치한 배경 영역의 높이가 사전에 정의한 값인 t보다 작은 경우에 인접하는 장면 영역 및 배경 영역을 결합할 수 있다.In addition, the
한편, 영역 결합부(350)는 인접하는 장면 영역 사이에 배경 영역이 존재하지 않더라도, 상술한 화면 크기에 기초하여 각 장면 영역을 결합할 수도 있다.Meanwhile, the
표시부(360)는 결합 영역과 비결합 영역을 화면 단위로 표시할 수 있다. 예를 들어, 배경 영역이 제외된 장면 영역 및 좌표 배열이 최종 슬라이드되는 화면 단위를 이미지 배열로 하여 표시할 수 있다. 즉, 표시부(360)는 단일 캔버스 이미지 및 각 세부 이미지 좌표 배열에 기초하여 장면 영역을 표시할 수 있다. The
표시부(360)는 장면 영역을 웹 뷰에 오버레이하여 렌더링하는 경우, 웹 뷰 내에 기렌더링된 객체를 비시각화할 수 있다. 또는, 장면 영역을 별도의 뷰어를 통해 렌더링하는 경우, 웹 뷰를 비시각화할 수 있다. When the scene area is overlaid on the web view and rendered, the
표시부(360)는 영역 결합부(350)에 의해 인덱싱에 따라 배열된 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시할 수 있다. 이 때, 표시된 장면 영역은 반복 재생에 대비하여 캐쉬(cache) 또는 스토리지(storage)에 개별적으로 저장될 수 있다. The
표시부(360)는 이미지 제공 장치(110)의 화면 크기에 기초하여 특정 장면 영역이 화면 크기를 초과하는 경우, 특정 장면 영역에서의 스크롤링을 수행할 수 있다. 예를 들어, 표시부(360)는 표시되는 장면 영역의 세로 비율이 지나치게 커서, 화면 크기를 벗어나는 경우, 해당 장면 영역에서 자동으로 스크롤링을 수행할 수 있다. When the specific scene area exceeds the screen size based on the screen size of the
매핑부(370)는 웹 뷰에 로드된 검색 결과 페이지의 좌표 정보와 캔버스에 렌더링된 이미지의 좌표 정보를 매핑할 수 있다. 이 때, 매핑된 좌표 정보는 배경 영역과 장면 영역 간의 구분을 통해 획득된 각 장면에 대한 메타 정보로 저장될 수 있다. The
스크롤링부(380)는 캔버스에 렌더링된 이미지의 좌표 정보에 기초하여 장면이 전환됨에 따라 웹 뷰에 로드된 검색 결과 페이지에 대한 스크롤링을 수행할 수 있다. 예를 들어, 캔버스에 렌더링된 이미지에 해당하는 장면 영역이 슬라이드 형태로 표시되고, 스크롤링부(380)는 장면 영역이 전환됨에 따라 해당 장면 영역과 맵핑된 검색 결과 페이지에 대한 스크롤링을 수행할 수 있다. 다시 말해, 스크롤링부(380)는 캔버스에 렌더링된 이미지가 포함하는 장면 영역의 전환과 웹 뷰에 로드된 검색 결과 페이지에 대한 스크롤링을 동기화 시킬 수 있다.The scrolling
스크롤링부(380)는 표시부(360)를 통해 표시되는 장면 영역의 전환에 따라 검색 결과 페이지에 대한 스크롤링을 수행하면서 검색 결과 페이지의 좌표 정보에 대응하는 이벤트를 발생시킬 수 있다. 예를 들어, 스크롤링부(380)는 이미지의 좌표 정보에 대응되는 소리가 재생되도록 제어할 수 있다. The scrolling
도 4a 내지 도 4d는 본 발명의 일 실시예에 따른 웹툰 이미지로부터 검출된 장면 영역을 화면 단위로 표시하는 과정을 설명하기 위한 예시적인 도면이다. 4A to 4D are exemplary diagrams for explaining a process of displaying a scene area detected from a webtoon image in a screen unit according to an embodiment of the present invention.
도 4a는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지에 해당하는 원본 이미지(400)를 도시한 예시적인 도면이다. 4A is an exemplary diagram illustrating an
도 4b는 본 발명의 일 실시예에 따른 이미지가 렌더링된 캔버스로부터 배경 영역을 구분하는 과정을 설명하기 위한 예시적인 도면이다. 도 4b를 참조하면, 이미지 제공 장치(110)는 웹툰 이미지의 최상단부터 행 단위로 픽셀을 분석할 수 있다. 분석 결과, 이미지 제공 장치(110)는 웹툰의 원본 이미지(400)로부터 제 1 배경 영역(410), 제 2 배경 영역(411), 제 3 배경 영역(412), 제 4 배경 영역(413), 제 5 배경 영역(414)으로 구분할 수 있다. 4B is an exemplary diagram for explaining a process of dividing a background area from a canvas on which an image is rendered according to an embodiment of the present invention. Referring to FIG. 4B, the
도 4c는 본 발명의 일 실시예에 따른 장면 영역을 검출하는 과정을 설명하기 위한 예시적인 도면이다. 도 4c를 참조하면, 이미지 제공 장치(110)는 웹툰의 원본 이미지로부터 제 1 장면 영역(420), 제 2 장면 영역(421), 제 3 장면 영역(422), 제 3 장면 영역(423), 제 4 장면 영역(424)을 구분할 수 있다. 이 때, 이미지 제공 장치(110)는 배경 영역 외의 나머지 인접된 픽셀 행들을 하나의 장면으로 검출하여 검출된 장면 영역을 인덱싱하여 배열시킬 수 있다. 4C is an exemplary diagram for explaining a process of detecting a scene area according to an embodiment of the present invention. Referring to FIG. 4C, the
이미지 제공 장치(110)는 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단할 수 있다. 예를 들어, 이미지 제공 장치(110)는 index:0부터 시작하여 순서대로 결합 여부를 판단할 수 있다. The
이미지 제공 장치(110)는 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 결합 조건에 따라 복수의 장면 영역을 하나의 장면 영역으로 결합시킬 수 있다. 결합 조건은 1) 이전 장면 영역과 다음 장면 영역, 그리고 그 사이의 배경 영역을 결합하더라도 이미지 제공 장치(110)의 화면을 벗어나지 않는 경우, 2) 장면 영역과 장면 영역 사이의 간격의 높이(예를 들어, 장면 영역 사이에 위치한 배경 영역의 높이)가 사전에 정의한 값인 t보다 작은 경우를 포함할 수 있다. 여기서, 사전에 정의한 값이 t는 배경 영역으로 검출된 모든 값들을 비교하여 적절한 값으로 산출되는 것일 수 있으며, 개발자에 의해 임의로 지정되는 것일 수 도 있다. The
예를 들어, 이미지 제공 장치(110)는 '계속'이라는 텍스트를 포함하는 제 3 장면 영역(422)에 대해 그 이전 장면 영역에 해당하는 제 2 장면 영역(421)과 제 3 배경 영역(412) 간의 결합 여부를 판단할 수 있다. 이미지 제공 장치(110)는 제 3 장면 영역(422)과 그 이전 장면 영역에 해당하는 제 2 장면 영역(421)과 제 3 배경 영역(412)을 모두 결합하더라도 이미지 제공 장치(110)의 화면 보다는 작으나, 사이의 제 3 배경 영역(412)이 지나치게 크다고 판단하여 결합 수행을 하지 않을 수 있다. For example, the
다른 예를 들어, 이미지 제공 장치(110)는 '구리'라는 텍스트를 포함하는 제 4 장면 영역(423)과 그 이전 장면 영역에 해당하는 제 3 장면 영역(422)과 제 4 배경 영역(413)의 경우, 결합 조건을 모두 충족하지 못하므로 각각의 장면 영역과 배경 영역으로 구분될 수 있다. For another example, the
또 다른 예를 들어, 이미지 제공 장치(110)는 작가 정보를 포함하는 제 5 장면 영역(424)과 그 이전 장면 영역에 해당하는 제 4 장면 영역(423)과 제 5 배경 영역(414)의 경우, 결합 조건을 모두 충족하므로, 제 4 장면 영역(423), 제 5 배경 영역(414), 제 5 장면 영역(424)을 결합시킬 수 있다. For another example, the
도 4d는 본 발명의 일 실시예에 따른 결합된 장면 영역을 도시한 예시적인 도면이다. 도 4d를 참조하면, 이미지 제공 장치(110)는 제 1 최종 장면 영역(430), 제 2 최종 장면 영역(431), 제 3 최종 장면 영역(432) 및 제 4 최종 장면 영역(433)를 화면 단위로 표시할 수 있다. 4D is an exemplary diagram showing a combined scene area according to an embodiment of the present invention. Referring to FIG. 4D, the
도 5a 및 도 5b는 본 발명의 일 실시예에 따른 장면 전환에 따라 스크롤링하는 과정을 설명하기 위한 예시적인 도면이다. 5A and 5B are exemplary diagrams for explaining a scrolling process according to a scene change according to an embodiment of the present invention.
도 5a는 본 발명의 일 실시예에 따른 이미지의 좌표 정보에 기초하여 장면이 전환됨에 따라 검색 결과 페이지에 대한 스크롤링을 수행하는 과정을 설명하기 위한 예시적인 도면이다. 도 5a를 참조하면, 이미지 제공 장치(110)는 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시하되, 해당 장면 영역의 좌표 정보와 맵핑된 웹툰의 원본 검색 결과 페이지의 좌표 정보에 대응하는 이벤트가 포함된 경우, 이미지 제공 장치(110)는 원본 검색 결과 페이지(500)를 강제로 이동시켜 이벤트가 포함된 영역으로 스크롤(510)을 이동시켜, 이벤트를 실행시키도록 할 수 있다. 5A is an exemplary diagram illustrating a process of performing scrolling on a search result page as a scene is changed based on coordinate information of an image according to an embodiment of the present invention. Referring to FIG. 5A, the
도 5b는 본 발명의 일 실시예에 따른 웹툰의 원본 검색 결과 페이지의 특정 스크롤 위치에 대응되는 소리를 출력하는 과정을 설명하기 위한 예시적인 도면이다. 도 4b를 참조하면, 웹툰의 원본 검색 결과 페이지에 제 1 좌표 정보(520, 예를 들어, Scroll Pos.Y = 750px)에 대응하는 이벤트가 포함된 경우, 이미지 제공 장치(110)는 제 1 좌표 정보(520)에 대응되는 소리(521)를 출력할 수 있다. 또한, 웹툰의 원본 검색 결과 페이지에 제 2 좌표 정보(530, 예를 들어, Scroll Pos.Y = 1600px)에 대응하는 이벤트가 포함된 경우, 이미지 제공 장치(110)는 제 2 좌표 정보(530)에 대응되는 소리(531)를 출력할 수 있다. 5B is an exemplary diagram for describing a process of outputting a sound corresponding to a specific scroll position of an original search result page of a webtoon according to an embodiment of the present invention. Referring to FIG. 4B, when an event corresponding to first coordinate information 520 (for example, Scroll Pos.Y = 750px) is included in the original search result page of the webtoon, the
도 6a 내지 도 6c는 본 발명의 일 실시예에 따른 장면 영역을 슬라이드 형태로 표시하는 과정을 설명하기 위한 예시적인 도면이다. 6A to 6C are exemplary views for explaining a process of displaying a scene area in a slide form according to an exemplary embodiment of the present invention.
도 6a는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지(610)가 표시된 화면을 도시한 예시적인 도면이다. 도 6b는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지(600)의 이미지가 배경 영역과 장면 영역으로 물리적으로 구분되어 표시된 화면(620)을 도시한 예시적인 도면이다. 도 6c는 본 발명의 일 실시예에 따른 웹툰의 이미지에 포함된 장면 영역을 슬라이드 형태로 표시한 화면(630)을 도시한 예시적인 도면이다. 6A is an exemplary diagram illustrating a screen on which a
도 7은 본 발명의 일 실시예에 따른 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법의 순서도이다. 도 7에 도시된 이미지 제공 장치(110)에 의해 수행되는 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 도 1 내지 도 6c에 도시된 실시예에 따라 시계열적으로 처리되는 단계들을 포함한다. 따라서, 이하 생략된 내용이라고 하더라도 도 1 내지 도 6c에 도시된 실시예에 따른 이미지 제공 장치(110)에 의해 수행되는 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법에도 적용된다. 7 is a flowchart of a method of providing an image from a search result page displayed on a web browser in an image providing device according to an embodiment of the present invention. A method of providing an image from a search result page displayed on a web browser performed by the
단계 S710에서 이미지 제공 장치(110)는 검색 결과 페이지를 웹 뷰에 로드할 수 있다. In step S710, the
단계 S720에서 이미지 제공 장치(110)는 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출할 수 있다. In step S720, the
단계 S730에서 이미지 제공 장치(110)는 추출된 이미지를 웹 뷰의 캔버스에 렌더링할 수 있다. In operation S730, the
단계 S740에서 이미지 제공 장치(110)는 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출할 수 있다. In operation S740, the
단계 S750에서 이미지 제공 장치(110)는 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 결합 영역을 생성할 수 있다. In operation S750, the
단계 S760에서 이미지 제공 장치(110)는 결합 영역과 비결합 영역을 화면 단위로 표시할 수 있다. In step S760, the
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 검색 결과 페이지에 따라 검출된 장면 영역을 인덱싱하여 배열시키는 단계 및 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of generating the combined region may further include indexing and arranging the detected scene regions according to the search result page, and determining whether to combine adjacent scene regions according to the indexing. .
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치(110)의 화면 크기에 기초하여 인접하는 장면 영역 및 배경 영역을 결합하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of generating the combined area is a step of combining the adjacent scene area and the background area based on the screen size of the
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 인접하는 장면 영역 및 배경 영역을 결합하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of generating the combined region may further include combining the adjacent scene region and the background region based on the height of the background region existing between the adjacent scene regions.
상술한 설명에서, 단계 S710 내지 S760은 본 발명의 구현예에 따라서, 추가적인 단계들로 더 분할되거나, 더 적은 단계들로 조합될 수 있다. 또한, 일부 단계는 필요에 따라 생략될 수도 있고, 단계 간의 순서가 전환될 수도 있다.In the above description, steps S710 to S760 may be further divided into additional steps or may be combined into fewer steps, according to an embodiment of the present invention. In addition, some steps may be omitted as necessary, and the order between steps may be switched.
도 1 내지 도 7을 통해 설명된 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 컴퓨터에 의해 실행되는 매체에 저장된 컴퓨터 프로그램 또는 컴퓨터에 의해 실행 가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 또한, 도 1 내지 도 7을 통해 설명된 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 컴퓨터에 의해 실행되는 매체에 저장된 컴퓨터 프로그램의 형태로도 구현될 수 있다. A method of providing an image from a search result page displayed on a web browser in the image providing apparatus described with reference to FIGS. 1 to 7 includes a computer program stored in a medium executed by a computer or a recording medium including instructions executable by a computer. It can also be implemented in a form. In addition, the method of providing an image from a search result page displayed on a web browser in the image providing apparatus described with reference to FIGS. 1 to 7 may be implemented in the form of a computer program stored in a medium executed by a computer.
컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체를 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다. Computer-readable media can be any available media that can be accessed by a computer, and includes both volatile and nonvolatile media, removable and non-removable media. Further, the computer-readable medium may include a computer storage medium. Computer storage media includes both volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data.
전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다. The above description of the present invention is for illustrative purposes only, and those of ordinary skill in the art to which the present invention pertains will be able to understand that other specific forms can be easily modified without changing the technical spirit or essential features of the present invention. will be. Therefore, it should be understood that the embodiments described above are illustrative in all respects and are not limiting. For example, each component described as a single type may be implemented in a distributed manner, and similarly, components described as being distributed may also be implemented in a combined form.
본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다. The scope of the present invention is indicated by the claims to be described later rather than the detailed description, and all changes or modified forms derived from the meaning and scope of the claims and their equivalent concepts should be construed as being included in the scope of the present invention. do.
110: 이미지 제공 장치
310: 로드부
320: 추출부
330: 렌더링부
340: 영역 검출부
350: 영역 결합부
360: 표시부
370: 매핑부
380: 스크롤링부110: image providing device
310: rod part
320: extraction unit
330: rendering unit
340: area detection unit
350: area coupling portion
360: display
370: mapping unit
380: scrolling unit
Claims (19)
상기 검색 결과 페이지를 웹 뷰에 로드하는 로드부;
상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 추출부;
상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 렌더링부;
상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 영역 검출부;
상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 영역 결합부; 및
상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 표시부
를 포함하되,
상기 영역 결합부는 상기 검색 결과 페이지에 따라 상기 검출된 장면 영역을 인덱싱하고, 상기 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하고,
상기 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치의 화면 크기에 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 것인, 이미지 제공 장치.
In the apparatus for providing an image from a search result page displayed on a web browser,
A loading unit that loads the search result page into a web view;
An extraction unit for extracting at least one image extracted from the loaded search result page;
A rendering unit rendering the extracted image on the canvas of the web view;
An area detection unit that separates and detects at least one background area and a scene area from the canvas on which the image is rendered;
A region combining unit for dividing the detected scene region into a combined region that cannot be combined and a non-combined region that cannot be combined, and generating the combined region; And
Display unit for displaying the combined area and the non-combined area in screen units
Including,
The area combining unit indexes the detected scene area according to the search result page, and determines whether or not adjacent scene areas are combined according to the indexing,
When a background area exists between the adjacent scene areas, the adjacent scene area and the background area are combined based on a screen size of the image providing device.
상기 추출부는 상기 검색 결과 페이지에 포함된 선택자에 기초하여 상기 이미지를 추출하는 것인, 이미지 제공 장치.
The method of claim 1,
The extracting unit extracts the image based on a selector included in the search result page.
상기 추출부는 상기 검색 결과 페이지에 포함된 선택자가 존재하지 않는 경우, 상기 검색 결과 페이지 내에서 기설정된 영역 이상을 차지하는 이미지 및 상기 이미지와 동일한 구조를 가지는 노드에 기초하여 상기 이미지를 추출하는 것인, 이미지 제공 장치.
The method of claim 2,
When the selector included in the search result page does not exist, the extracting unit extracts the image based on an image occupying more than a preset area in the search result page and a node having the same structure as the image, Image serving device.
상기 렌더링부는 상기 추출된 이미지의 URL에 기초하여 상기 검색 결과 페이지에서의 실제 배치 순서에 따라 상기 추출된 이미지를 상기 캔버스에 렌더링하는 것인, 이미지 제공 장치.
The method of claim 1,
The rendering unit renders the extracted image on the canvas according to an actual arrangement order in the search result page based on the URL of the extracted image.
상기 영역 검출부는 상기 렌더링된 이미지로부터 빈도수가 가장 높은 컬러를 배경색으로 선정하고, 상기 선정된 배경색에 기초하여 상기 배경 영역 및 상기 장면 영역을 검출하는 것인, 이미지 제공 장치.
The method of claim 1,
The image providing apparatus, wherein the region detection unit selects a color with the highest frequency from the rendered image as a background color, and detects the background region and the scene region based on the selected background color.
상기 영역 검출부는 상기 렌더링된 이미지를 픽셀 행 단위로 분석하여 상기 배경색으로만 구성되는 영역을 배경 영역으로 검출하고, 상기 렌더링된 이미지 중 상기 배경 영역에 해당하지 않는 적어도 하나의 픽셀 행을 상기 장면 영역으로 검출하는 것인, 이미지 제공 장치.
The method of claim 5,
The area detection unit analyzes the rendered image in pixel row units, detects an area consisting only of the background color as a background area, and determines at least one pixel row not corresponding to the background area among the rendered images as the scene area. To detect, image providing device.
상기 영역 결합부는 상기 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 것인, 이미지 제공 장치.
The method of claim 1,
The region combining unit further combines the adjacent scene region and the background region based on a height of a background region existing between the adjacent scene regions.
상기 표시부는 상기 장면 영역을 상기 웹 뷰에 오버레이하여 렌더링하는 경우, 상기 웹 뷰 내에 기렌더링된 객체를 비시각화하는 것인, 이미지 제공 장치.
The method of claim 1,
When the display unit overlays the scene area on the web view and renders it, the image providing apparatus is configured to non-visualize the previously rendered object in the web view.
상기 표시부는 상기 장면 영역을 별도의 뷰어를 통해 렌더링하는 경우, 상기 웹 뷰를 비시각화하는 것인, 이미지 제공 장치.
The method of claim 1,
The image providing apparatus, wherein the display unit renders the web view non-visual when the scene area is rendered through a separate viewer.
상기 표시부는 상기 인덱싱된 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시하는 것인, 이미지 제공 장치.
The method of claim 1,
Wherein the display unit displays the indexed scene area in the form of a slide in which the scene is switched according to a preset speed.
상기 표시부는 이미지 제공 장치의 화면 크기에 기초하여 특정 장면 영역이 상기 화면 크기를 초과하는 경우 상기 특정 장면 영역에서의 스크롤링을 수행하는 것인, 이미지 제공 장치.
The method of claim 12,
The image providing apparatus, wherein the display unit performs scrolling in the specific scene area when a specific scene area exceeds the screen size based on the screen size of the image providing device.
상기 웹 뷰에 로드된 상기 검색 결과 페이지의 좌표 정보와 상기 캔버스에 렌더링된 이미지의 좌표 정보를 매핑하는 매핑부; 및
상기 캔버스에 렌더링된 이미지의 좌표 정보에 기초하여 상기 장면이 전환됨에 따라 상기 웹 뷰에 로드된 상기 검색 결과 페이지에 대한 스크롤링을 수행하는 스크롤링부
더 포함하는 것인, 이미지 제공 장치.
The method of claim 12,
A mapping unit for mapping coordinate information of the search result page loaded in the web view and coordinate information of an image rendered on the canvas; And
A scrolling unit that performs scrolling on the search result page loaded in the web view as the scene is switched based on coordinate information of the image rendered on the canvas
The image providing device further comprising.
상기 스크롤링부는 상기 검색 결과 페이지에 대한 스크롤링을 수행하면서 상기 검색 결과 페이지의 좌표 정보에 대응하는 이벤트를 발생시키는 것인, 이미지 제공 장치.
The method of claim 14,
The scrolling unit generates an event corresponding to coordinate information of the search result page while performing scrolling on the search result page.
상기 검색 결과 페이지를 웹 뷰에 로드하는 단계;
상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 단계;
상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 단계;
상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 단계;
상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 단계; 및
상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 단계
를 포함하는 것이되,
상기 검색 결과 페이지에 따라 상기 검출된 장면 영역을 인덱싱하는 단계;
상기 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하는 단계; 및
상기 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치의 화면 크기에 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 단계
를 더 포함하는 것인, 이미지 제공 방법.
In a method for providing an image from a search result page displayed in a web browser,
Loading the search result page into a web view;
Extracting at least one image extracted from the loaded search result page;
Rendering the extracted image on a canvas of the web view;
Separating and detecting at least one background area and a scene area from the canvas on which the image is rendered;
Dividing the detected scene region into a combined region that can be combined and a non-combined region that cannot be combined, and generating the combined region; And
Displaying the combined area and the non-combined area in screen units
Including,
Indexing the detected scene area according to the search result page;
Determining whether to combine adjacent scene regions according to the indexing; And
When a background area exists between the adjacent scene areas, combining the adjacent scene area and the background area based on a screen size of an image providing device
That further comprises a method of providing an image.
상기 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 단계
를 더 포함하는 것인, 이미지 제공 방법.The method of claim 16,
Combining the adjacent scene area and the background area further based on the height of the background area existing between the adjacent scene areas
That further comprises a method of providing an image.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020170084974A KR102238812B1 (en) | 2017-07-04 | 2017-07-04 | Appratus and method for providing image from search result page displayed by web browser |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020170084974A KR102238812B1 (en) | 2017-07-04 | 2017-07-04 | Appratus and method for providing image from search result page displayed by web browser |
Publications (2)
Publication Number | Publication Date |
---|---|
KR20190004570A KR20190004570A (en) | 2019-01-14 |
KR102238812B1 true KR102238812B1 (en) | 2021-04-09 |
Family
ID=65027654
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR1020170084974A KR102238812B1 (en) | 2017-07-04 | 2017-07-04 | Appratus and method for providing image from search result page displayed by web browser |
Country Status (1)
Country | Link |
---|---|
KR (1) | KR102238812B1 (en) |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2011238043A (en) * | 2010-05-11 | 2011-11-24 | Kddi Corp | Summarized comic image generation device, program and method for generating summary of comic content |
JP2011249926A (en) * | 2010-05-24 | 2011-12-08 | Nikon Corp | Image processing program and image processing apparatus |
JP2012168590A (en) * | 2011-02-09 | 2012-09-06 | Univ Of Electro-Communications | Comic browsing system |
KR101676575B1 (en) * | 2015-07-24 | 2016-11-15 | 주식회사 카카오 | Apparatus and method for extracting share area of comic content |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR101685105B1 (en) * | 2015-01-27 | 2016-12-20 | 네이버 주식회사 | Cartoon displaying method and cartoon displaying device |
KR101780792B1 (en) * | 2015-03-20 | 2017-10-10 | 네이버 주식회사 | Apparatus, method, and computer program for creating catoon data, and apparatus for viewing catoon data |
-
2017
- 2017-07-04 KR KR1020170084974A patent/KR102238812B1/en active IP Right Grant
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2011238043A (en) * | 2010-05-11 | 2011-11-24 | Kddi Corp | Summarized comic image generation device, program and method for generating summary of comic content |
JP2011249926A (en) * | 2010-05-24 | 2011-12-08 | Nikon Corp | Image processing program and image processing apparatus |
JP2012168590A (en) * | 2011-02-09 | 2012-09-06 | Univ Of Electro-Communications | Comic browsing system |
KR101676575B1 (en) * | 2015-07-24 | 2016-11-15 | 주식회사 카카오 | Apparatus and method for extracting share area of comic content |
Also Published As
Publication number | Publication date |
---|---|
KR20190004570A (en) | 2019-01-14 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11726645B2 (en) | Display apparatus for classifying and searching content, and method thereof | |
US8416332B2 (en) | Information processing apparatus, information processing method, and program | |
US10891032B2 (en) | Image reproduction apparatus and method for simultaneously displaying multiple moving-image thumbnails | |
JP7270661B2 (en) | Video processing method and apparatus, electronic equipment, storage medium and computer program | |
US20210398249A1 (en) | Image distribution device, image distribution system, image distribution method, and image distribution program | |
US10241660B2 (en) | Display control apparatus, method for controlling the same, and storage medium | |
KR20090038706A (en) | Display apparatus and method | |
US10210598B2 (en) | Electronic device for displaying a plurality of images and method for processing an image | |
KR20160149141A (en) | Electronic Apparatus displaying a plurality of images and image processing method thereof | |
US20160012851A1 (en) | Image processing device, image processing method, and program | |
CN105430393B (en) | Picture processing method, picture processing device, picture processing platform and storage medium | |
JP2014127879A (en) | Broadcast image output device, broadcast image output method, and television | |
US8405754B2 (en) | Image processing apparatus and control method for image processing apparatus | |
JP2005354333A (en) | Image reproducer and program | |
EP3151243B1 (en) | Accessing a video segment | |
EP2801920A1 (en) | Method and apparatus for displaying web page | |
KR102238812B1 (en) | Appratus and method for providing image from search result page displayed by web browser | |
CN113286181A (en) | Data display method and device | |
KR101825598B1 (en) | Apparatus and method for providing contents, and computer program recorded on computer readable recording medium for executing the method | |
CN114880606A (en) | Page display method, device, equipment, medium and program product | |
CN111367598B (en) | Method and device for processing action instruction, electronic equipment and computer readable storage medium | |
US10440218B2 (en) | Image processing apparatus, control method for image processing apparatus, and non-transitory computer-readable recording medium | |
CN113168286A (en) | Terminal, control method for the terminal, and recording medium recording program for implementing the method | |
CN111124580A (en) | File display method and device | |
JP2021182667A (en) | Image processing apparatus and image processing method |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A201 | Request for examination | ||
E902 | Notification of reason for refusal | ||
E90F | Notification of reason for final refusal | ||
E701 | Decision to grant or registration of patent right | ||
GRNT | Written decision to grant |