KR20190004570A - 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
- KR20190004570A KR20190004570A KR1020170084974A KR20170084974A KR20190004570A KR 20190004570 A KR20190004570 A KR 20190004570A KR 1020170084974 A KR1020170084974 A KR 1020170084974A KR 20170084974 A KR20170084974 A KR 20170084974A KR 20190004570 A KR20190004570 A KR 20190004570A
- Authority
- KR
- South Korea
- Prior art keywords
- area
- image
- scene
- search result
- result page
- Prior art date
Links
- 238000000034 method Methods 0.000 title claims description 46
- 238000009877 rendering Methods 0.000 claims abstract description 19
- 230000008878 coupling Effects 0.000 claims abstract 11
- 238000010168 coupling process Methods 0.000 claims abstract 11
- 238000005859 coupling reaction Methods 0.000 claims abstract 11
- 238000012545 processing Methods 0.000 claims description 7
- 239000000284 extract Substances 0.000 claims description 6
- 238000013507 mapping Methods 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 19
- 238000004891 communication Methods 0.000 description 5
- 238000001514 detection method Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000003384 imaging method Methods 0.000 description 2
- CVOFKRWYWCSDMA-UHFFFAOYSA-N 2-chloro-n-(2,6-diethylphenyl)-n-(methoxymethyl)acetamide;2,6-dinitro-n,n-dipropyl-4-(trifluoromethyl)aniline Chemical compound CCC1=CC=CC(CC)=C1N(COC)C(=O)CCl.CCCN(CCC)C1=C([N+]([O-])=O)C=C(C(F)(F)F)C=C1[N+]([O-])=O CVOFKRWYWCSDMA-UHFFFAOYSA-N 0.000 description 1
- RYGMFSIKBFXOCR-UHFFFAOYSA-N Copper Chemical compound [Cu] RYGMFSIKBFXOCR-UHFFFAOYSA-N 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
- 238000012937 correction Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000002360 preparation method 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)
- Economics (AREA)
- General Health & Medical Sciences (AREA)
- Geometry (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Health & Medical Sciences (AREA)
- General Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Human Resources & Organizations (AREA)
- Marketing (AREA)
- Primary Health Care (AREA)
- Strategic Management (AREA)
- General Business, Economics & Management (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
Description
본 발명은 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 장치 및 방법에 관한 것이다. The present invention relates to an apparatus and method for providing an image from a search result page displayed in a web browser.
웹툰이란 웹(web)과 카툰(cartoon)의 합성어로, 각종 멀티미디어 효과를 동원하여 제작된 인터넷 만화를 말한다. 웹툰은 단순히 만화책을 스캔하여 게재하는 온라인상의 만화가 아닌, 영상과 음성더빙, 플래시 기법 등을 이용하여 제작된 영상 애니메이션으로, 등장인물들의 대사, 배경음악 등이 함께 나옴으로써, 만화영화나 만화비디오를 보는 듯한 느낌을 제공한다. Webtoon is a compound word of web and cartoon. It is an internet comic created with various multimedia effects. WebtoTun is not only an online comic that scans comic books, but video animations made using video, audio dubbing, and flash techniques, along with dialogue of characters and background music, It gives a feeling of seeing.
이러한 웹툰은 PC, 모바일, 태블릿 PC, TV를 통해 시청할 수 있으며, 웹툰이 단말을 통해 제공되는 기술과 관련하여 선행기술인 한국공개특허 제 2016-0017982호는 표시 제어 장치, 표시 제어 방법 및 이를 컴퓨터에서 실행하기 위한 컴퓨터 프로그램을 개시하고 있다. Korean Patent Laid-Open Publication No. 2016-0017982, which is related to the technology in which the web toput is provided through a terminal, can be viewed on a PC, a mobile, a tablet PC, and a TV, And a computer program for executing the program.
웹툰은 웹을 기반으로 제작된 인터넷 만화로, 사용자 단말의 화면에 따라 웹툰의 이미지가 분할되어 표시될 수 있다. 그러나 사용자 단말의 화면을 고려하여 웹툰 이미지를 분할하여 표시하는 경우, 웹툰의 내용이 고려되지 않는다는 단점을 가지고 있다. Webtoons are internet cartoons based on the web, and images of the webtoons can be divided and displayed according to the screen of the user terminal. However, when the webtoot image is divided and displayed considering the screen of the user terminal, the content of the webtoon is not considered.
종래의 스크롤에 최적화된 웹툰 이미지를 비교 분석하여, 물리적으로 웹툰 이미지의 장면 영역을 결합시킴으로써, 웹툰 이미지가 슬라이드 형태로 표시되도록 하는 이미지 제공 장치 및 방법을 제공하고자 한다. 종래의 PC, 스마트폰, 태블릿 PC 등의 화면에 최적화된 웹툰 이미지를 물리적으로 가공시킴으로써, 음성 인터페이스 기반의 미디어 제공 장치에서도 최적화된 웹툰 이미지를 제공하는 이미지 제공 장치 및 방법을 제공하고자 한다. 다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제들로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다. An object of the present invention is to provide an image providing apparatus and method for displaying a webtoon image in a slide form by comparing and analyzing a webtoot image optimized for conventional scrolling and combining a scene area of a webtoon image physically. An image providing apparatus and method for providing an optimized webtoot image even in a media providing apparatus based on a voice interface by physically processing a webtoot image optimized for a screen of a conventional PC, a smart phone, a tablet PC, and the like. It is to be understood, however, that the technical scope of the present invention is not limited to the above-described technical problems, and other technical problems may exist.
상술한 기술적 과제를 달성하기 위한 수단으로서, 본 발명의 일 실시예는, 검색 결과 페이지를 웹 뷰에 로드하는 로드부, 상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 추출부, 상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 렌더링부, 상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 영역 검출부, 상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 영역 결합부 및 상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 표시부를 포함하는 이미지 제공 장치를 제공할 수 있다. According to an aspect of the present invention, there is provided an image processing apparatus including a loading unit for loading a search result page into a web view, an extracting unit for extracting at least one image extracted from the loaded search result page, A rendering unit for rendering the extracted image on a canvas of the web view, an area detecting unit for detecting at least one background area and a scene area from the canvas on which the image is rendered, And a display unit for displaying the combined area and the non-combined area on a screen basis, by dividing the non-combined area into a non-combined area that can not be combined with the non-combined area.
본 발명의 다른 실시예는, 상기 검색 결과 페이지를 웹 뷰에 로드하는 단계, 상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 단계, 상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 단계, 상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 단계, 상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 단계 및 상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 단계를 포함하는 이미지 제공 방법을 제공할 수 있다. Another embodiment of the present invention is a method of rendering a web page, comprising: 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 Detecting at least one background area and a scene area from the canvas on which the image is rendered, and detecting the detected scene area as a non-combining area capable of being combined with a combining area capable of combining, And displaying the combined area and the non-combined area on a screen basis.
상술한 과제 해결 수단은 단지 예시적인 것으로서, 본 발명을 제한하려는 의도로 해석되지 않아야 한다. 상술한 예시적인 실시예 외에도, 도면 및 발명의 상세한 설명에 기재된 추가적인 실시예가 존재할 수 있다.The above-described task solution is merely exemplary and should not be construed as limiting the present invention. In addition to the exemplary embodiments described above, there may be additional embodiments described in the drawings and the detailed description of the invention.
전술한 본 발명의 과제 해결 수단 중 어느 하나에 의하면, 종래의 스크롤에 최적화된 웹툰 이미지를 비교 분석하여, 물리적으로 웹툰 이미지의 장면 영역을 결합시킴으로써, 웹툰 이미지가 슬라이드 형태로 표시되도록 하는 이미지 제공 장치 및 방법을 제공할 수 있다. 종래의 PC, 스마트폰, 태블릿 PC 등의 화면에 최적화된 웹툰 이미지를 물리적으로 가공시킴으로써, 음성 인터페이스 기반의 미디어 제공 장치에서도 최적화된 웹툰 이미지를 제공하는 이미지 제공 장치 및 방법을 제공할 수 있다.According to any one of the above-described objects of the present invention, an image providing apparatus for displaying a webtoon image in a slide form by comparing and analyzing a webtoon image optimized for a conventional scroll, And methods. It is possible to provide an image providing apparatus and method that provide an optimized webtoot image even in a media providing apparatus based on a voice interface by physically processing a webtoot image optimized for a screen of a conventional PC, a smart phone, a tablet PC, and the like.
도 1은 본 발명의 일 실시예에 따른 이미지 제공 시스템의 구성도이다.
도 2a 및 도 2b는 종래의 웹툰 이미지를 도시한 예시적인 도면이다.
도 3는 본 발명의 일 실시예에 따른 이미지 제공 장치의 구성도이다.
도 4a 내지 도 4d는 본 발명의 일 실시예에 따른 웹툰 이미지로부터 검출된 장면 영역을 화면 단위로 표시하는 과정을 설명하기 위한 예시적인 도면이다.
도 5a 및 도 5b는 본 발명의 일 실시예에 따른 장면 전환에 따라 스크롤링하는 과정을 설명하기 위한 예시적인 도면이다.
도 6a 내지 도 6c는 본 발명의 일 실시예에 따른 장면 영역을 슬라이드 형태로 표시하는 과정을 설명하기 위한 예시적인 도면이다.
도 7은 본 발명의 일 실시예에 따른 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법의 순서도이다. 1 is a configuration diagram of an image providing system according to an embodiment of the present invention.
2A and 2B are exemplary views showing a conventional webtoot image.
3 is a configuration diagram of an image providing apparatus according to an embodiment of the present invention.
4A to 4D are exemplary diagrams illustrating a process of displaying a scene region detected from a webtoon image according to an exemplary embodiment of the present invention on a screen basis.
5A and 5B are exemplary diagrams illustrating a process of scrolling according to a scene change according to an embodiment of the present invention.
6A to 6C are exemplary diagrams illustrating a process of displaying a scene area in a slide form according to an embodiment of the present invention.
7 is a flowchart of a method for providing an image from a search result page displayed in a web browser in an image providing apparatus 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, which will be readily apparent to those skilled in the art. The present invention may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. In order to clearly illustrate the present invention, parts not related to the description are omitted, and similar parts are denoted by like reference characters throughout the specification.
명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미하며, 하나 또는 그 이상의 다른 특징이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다. Throughout the specification, when a part is referred to as being "connected" to another part, it includes not only "directly connected" but also "electrically connected" with another part in between . Also, when an element is referred to as "including" an element, it is to be understood that the element may include other elements as well as other elements, And does not preclude the presence or addition of one or more other features, integers, steps, operations, components, parts, or combinations thereof.
본 명세서에 있어서 '부(部)'란, 하드웨어에 의해 실현되는 유닛(unit), 소프트웨어에 의해 실현되는 유닛, 양방을 이용하여 실현되는 유닛을 포함한다. 또한, 1 개의 유닛이 2 개 이상의 하드웨어를 이용하여 실현되어도 되고, 2 개 이상의 유닛이 1 개의 하드웨어에 의해 실현되어도 된다.In this specification, the term " part " includes a unit realized by hardware, a unit realized by software, and a unit realized by using both. Further, one unit may be implemented using two or more hardware, or two or more units may be implemented by one hardware.
본 명세서에 있어서 단말 또는 디바이스가 수행하는 것으로 기술된 동작이나 기능 중 일부는 해당 단말 또는 디바이스와 연결된 서버에서 대신 수행될 수도 있다. 이와 마찬가지로, 서버가 수행하는 것으로 기술된 동작이나 기능 중 일부도 해당 서버와 연결된 단말 또는 디바이스에서 수행될 수도 있다.In this specification, some of the operations or functions described as being performed by the terminal or the device may be performed in the server connected to the terminal or the device instead. Similarly, some of the operations or functions described as being performed by the server may also be performed on a terminal or device connected to the server.
이하 첨부된 도면을 참고하여 본 발명의 일 실시예를 상세히 설명하기로 한다. Hereinafter, embodiments 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 configuration diagram of an image providing system according to an embodiment of the present invention. 1, an
도 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) 등이 포함되나 이에 한정되지는 않는다. The network refers to a connection structure in which information can be exchanged between each node such as terminals and servers. The network includes a local area network (LAN), a wide area network (WAN), a wide area network (WWW) Wide Web, wired / wireless data communication network, telephone network, wired / wireless television communication network, and the like. Examples of wireless data communication networks include 3G, 4G, 5G, 3GPP, LTE, WIMAX, Wi-Fi, Bluetooth, infrared, Communications, Visible Light Communication (VLC), LiFi, and the like.
이미지 제공 장치(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 webtoot image.
도 2a는 PC(Personal Computer)의 웹 브라우저를 통해 디스플레이된 웹툰 이미지를 도시한 화면이다. 도 2a를 참조하면, PC에서 웹툰이 게시되는 URL에 접속하면, 웹툰 이미지가 PC의 화면에 최적화되어 디스플레이된다. 2A is a screen showing a webtoon image displayed through a web browser of a PC (Personal Computer). Referring to FIG. 2A, when a PC accesses a URL where a webtoon is posted, a webtoon image is optimally displayed on a PC screen.
도 2b는 웹툰 이미지를 도시한 화면이다. 도 2b를 참조하면, 웹 브라우저를 통해 디스플레이되는 웹툰 이미지의 실제 이미지는 장면 간의 구분과 상관 없이 각 이미지 파일의 용량 별로 구분되어 있다. 2B is a screen showing a Webtoon image. Referring to FIG. 2B, the actual images of the WebToon image displayed through the web browser are classified according to the capacity of each image file regardless of the distinction between scenes.
따라서, 본 발명에서는 웹툰 이미지에 물리적인 수정을 가하여 웹툰의 내용또는 장면 간의 구성을 고려하는 동시에, 웹툰 이미지가 음성 인터페이스 기반의 장치에 최적화되어 출력되도록 할 수 있다. 한편, 본 발명은 웹툰 이미지뿐만 아니라 원본 이미지 간의 구분이 내용 또는 장면과 관계없이 되어 있어서, 물리적인 수정을 통해 내용의 구분 및 장면 간의 구분이 필요한 이미지에 대해서라면 모두 적용될 수 있다. Therefore, in the present invention, a physical correction is applied to the webtoon image to consider the configuration of the webtoont or the configuration between the scenes, and the webtoon image can be optimally output to the device based on the voice interface. In the meantime, the present invention can be applied not only to the Webtoon image, but also to the image which is required to distinguish between the contents and the scenes through the physical modification because the distinction between the original images is independent of the content or the scene.
도 3은 본 발명의 일 실시예에 따른 이미지 제공 장치의 구성도이다. 도 3을 참조하면, 이미지 제공 장치(110)는 로드부(310), 추출부(320), 렌더링부(330), 영역 검출부(340), 영역 결합부(350), 표시부(360), 매핑부(370) 및 스크롤링부(380)를 포함할 수 있다. 3 is a configuration diagram of an image providing apparatus according to an embodiment of the present invention. 3, the
로드부(310)는 검색 결과 페이지를 웹 뷰에 로드할 수 있다. 예를 들어, 사용자가 특정 웹툰을 보고자 하는 경우, 로드부(310)는 사용자의 요청에 의해 해당 웹툰을 검색한 검색 결과 페이지(html)를 웹 뷰에 로드할 수 있다. 이 때, 웹 뷰는 사용자에게 시각적으로 노출되지 않는 것일 수 있다. The
추출부(320)는 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출할 수 있다. 예를 들어, 추출부(320)는 검색 결과 페이지에 포함된 선택자에 기초하여 이미지를 추출하고, 추출된 이미지의 경로를 나타내는 이미지의 URL을 렌더링부(330)로 전달할 수 있다. 이 때, 검색 결과 페이지에 포함된 선택자가 존재하지 않는 경우, 검색 결과 페이지 내에서 기설정된 영역 이상을 차지하는 이미지 및 이미지와 동일한 뎁스(depth)와 구조를 가지는 노드에 기초하여 이미지를 추출할 수 있다. 선택자(selector)는, 검색 결과 페이지에 대응하는 웹 문서의 소스코드로부터 수집될 수 있으며, 예를 들어, 웹 문서를 구성하는 각 엘리먼트에 해당하는 '#rso', '.srg', '.mnr-c' 등의 문자를 포함할 수 있다. The extracting
렌더링부(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 it is determined that the scene regions are not combined with each other, the
또한, 영역 결합부(350)는 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 인접하는 장면 영역 및 배경 영역을 결합할 수 있다. 예를 들어, 영역 결합부(350)는 인접하는 장면 영역 사이에 위치한 배경 영역의 높이가 사전에 정의한 값인 t보다 작은 경우에 인접하는 장면 영역 및 배경 영역을 결합할 수 있다.In addition, the
한편, 영역 결합부(350)는 인접하는 장면 영역 사이에 배경 영역이 존재하지 않더라도, 상술한 화면 크기에 기초하여 각 장면 영역을 결합할 수도 있다.On the other hand, the
표시부(360)는 결합 영역과 비결합 영역을 화면 단위로 표시할 수 있다. 예를 들어, 배경 영역이 제외된 장면 영역 및 좌표 배열이 최종 슬라이드되는 화면 단위를 이미지 배열로 하여 표시할 수 있다. 즉, 표시부(360)는 단일 캔버스 이미지 및 각 세부 이미지 좌표 배열에 기초하여 장면 영역을 표시할 수 있다. The
표시부(360)는 장면 영역을 웹 뷰에 오버레이하여 렌더링하는 경우, 웹 뷰 내에 기렌더링된 객체를 비시각화할 수 있다. 또는, 장면 영역을 별도의 뷰어를 통해 렌더링하는 경우, 웹 뷰를 비시각화할 수 있다. When the scene region is overlaid on the web view, the
표시부(360)는 영역 결합부(350)에 의해 인덱싱에 따라 배열된 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시할 수 있다. 이 때, 표시된 장면 영역은 반복 재생에 대비하여 캐쉬(cache) 또는 스토리지(storage)에 개별적으로 저장될 수 있다. The
표시부(360)는 이미지 제공 장치(110)의 화면 크기에 기초하여 특정 장면 영역이 화면 크기를 초과하는 경우, 특정 장면 영역에서의 스크롤링을 수행할 수 있다. 예를 들어, 표시부(360)는 표시되는 장면 영역의 세로 비율이 지나치게 커서, 화면 크기를 벗어나는 경우, 해당 장면 영역에서 자동으로 스크롤링을 수행할 수 있다. The
매핑부(370)는 웹 뷰에 로드된 검색 결과 페이지의 좌표 정보와 캔버스에 렌더링된 이미지의 좌표 정보를 매핑할 수 있다. 이 때, 매핑된 좌표 정보는 배경 영역과 장면 영역 간의 구분을 통해 획득된 각 장면에 대한 메타 정보로 저장될 수 있다. The
스크롤링부(380)는 캔버스에 렌더링된 이미지의 좌표 정보에 기초하여 장면이 전환됨에 따라 웹 뷰에 로드된 검색 결과 페이지에 대한 스크롤링을 수행할 수 있다. 예를 들어, 캔버스에 렌더링된 이미지에 해당하는 장면 영역이 슬라이드 형태로 표시되고, 스크롤링부(380)는 장면 영역이 전환됨에 따라 해당 장면 영역과 맵핑된 검색 결과 페이지에 대한 스크롤링을 수행할 수 있다. 다시 말해, 스크롤링부(380)는 캔버스에 렌더링된 이미지가 포함하는 장면 영역의 전환과 웹 뷰에 로드된 검색 결과 페이지에 대한 스크롤링을 동기화 시킬 수 있다.The scrolling
스크롤링부(380)는 표시부(360)를 통해 표시되는 장면 영역의 전환에 따라 검색 결과 페이지에 대한 스크롤링을 수행하면서 검색 결과 페이지의 좌표 정보에 대응하는 이벤트를 발생시킬 수 있다. 예를 들어, 스크롤링부(380)는 이미지의 좌표 정보에 대응되는 소리가 재생되도록 제어할 수 있다. The scrolling
도 4a 내지 도 4d는 본 발명의 일 실시예에 따른 웹툰 이미지로부터 검출된 장면 영역을 화면 단위로 표시하는 과정을 설명하기 위한 예시적인 도면이다. 4A to 4D are exemplary diagrams illustrating a process of displaying a scene region detected from a webtoon image according to an exemplary embodiment of the present invention on a screen basis.
도 4a는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지에 해당하는 원본 이미지(400)를 도시한 예시적인 도면이다. FIG. 4A is an exemplary diagram showing an
도 4b는 본 발명의 일 실시예에 따른 이미지가 렌더링된 캔버스로부터 배경 영역을 구분하는 과정을 설명하기 위한 예시적인 도면이다. 도 4b를 참조하면, 이미지 제공 장치(110)는 웹툰 이미지의 최상단부터 행 단위로 픽셀을 분석할 수 있다. 분석 결과, 이미지 제공 장치(110)는 웹툰의 원본 이미지(400)로부터 제 1 배경 영역(410), 제 2 배경 영역(411), 제 3 배경 영역(412), 제 4 배경 영역(413), 제 5 배경 영역(414)으로 구분할 수 있다. FIG. 4B is an exemplary diagram illustrating a process of separating a background region from a canvas in which an image is rendered according to an embodiment of the present invention. FIG. 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 region 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 example, the
또 다른 예를 들어, 이미지 제공 장치(110)는 작가 정보를 포함하는 제 5 장면 영역(424)과 그 이전 장면 영역에 해당하는 제 4 장면 영역(423)과 제 5 배경 영역(414)의 경우, 결합 조건을 모두 충족하므로, 제 4 장면 영역(423), 제 5 배경 영역(414), 제 5 장면 영역(424)을 결합시킬 수 있다. In another example, the
도 4d는 본 발명의 일 실시예에 따른 결합된 장면 영역을 도시한 예시적인 도면이다. 도 4d를 참조하면, 이미지 제공 장치(110)는 제 1 최종 장면 영역(430), 제 2 최종 장면 영역(431), 제 3 최종 장면 영역(432) 및 제 4 최종 장면 영역(433)를 화면 단위로 표시할 수 있다. 4D is an exemplary diagram illustrating a combined scene region according to one embodiment of the present invention. 4D, the
도 5a 및 도 5b는 본 발명의 일 실시예에 따른 장면 전환에 따라 스크롤링하는 과정을 설명하기 위한 예시적인 도면이다. 5A and 5B are exemplary diagrams illustrating a process of scrolling according to a scene change according to an embodiment of the present invention.
도 5a는 본 발명의 일 실시예에 따른 이미지의 좌표 정보에 기초하여 장면이 전환됨에 따라 검색 결과 페이지에 대한 스크롤링을 수행하는 과정을 설명하기 위한 예시적인 도면이다. 도 5a를 참조하면, 이미지 제공 장치(110)는 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시하되, 해당 장면 영역의 좌표 정보와 맵핑된 웹툰의 원본 검색 결과 페이지의 좌표 정보에 대응하는 이벤트가 포함된 경우, 이미지 제공 장치(110)는 원본 검색 결과 페이지(500)를 강제로 이동시켜 이벤트가 포함된 영역으로 스크롤(510)을 이동시켜, 이벤트를 실행시키도록 할 수 있다. FIG. 5A is an exemplary diagram illustrating a process of scrolling a search result page according to a scene change based on coordinate information of an image according to an exemplary embodiment of the present invention. Referring to FIG. 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)를 출력할 수 있다. FIG. 5B is an exemplary diagram illustrating a process of outputting a sound corresponding to a specific scroll position of an original search result page of the webtoon according to an exemplary embodiment of the present invention. Referring to FIG. 4B, when an event corresponding to the first coordinate information 520 (e.g., Scroll Pos.Y = 750px) is included in the original search result page of the webtoon, the
도 6a 내지 도 6c는 본 발명의 일 실시예에 따른 장면 영역을 슬라이드 형태로 표시하는 과정을 설명하기 위한 예시적인 도면이다. 6A to 6C are exemplary diagrams illustrating a process of displaying a scene area in a slide form according to an embodiment of the present invention.
도 6a는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지(610)가 표시된 화면을 도시한 예시적인 도면이다. 도 6b는 본 발명의 일 실시예에 따른 웹툰의 검색 결과 페이지(600)의 이미지가 배경 영역과 장면 영역으로 물리적으로 구분되어 표시된 화면(620)을 도시한 예시적인 도면이다. 도 6c는 본 발명의 일 실시예에 따른 웹툰의 이미지에 포함된 장면 영역을 슬라이드 형태로 표시한 화면(630)을 도시한 예시적인 도면이다. 6A is an exemplary diagram showing a screen displaying a
도 7은 본 발명의 일 실시예에 따른 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법의 순서도이다. 도 7에 도시된 이미지 제공 장치(110)에 의해 수행되는 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 도 1 내지 도 6c에 도시된 실시예에 따라 시계열적으로 처리되는 단계들을 포함한다. 따라서, 이하 생략된 내용이라고 하더라도 도 1 내지 도 6c에 도시된 실시예에 따른 이미지 제공 장치(110)에 의해 수행되는 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법에도 적용된다. 7 is a flowchart of a method for providing an image from a search result page displayed in a web browser in an image providing apparatus according to an embodiment of the present invention. The method of providing an image from a search result page displayed in a web browser performed by the
단계 S710에서 이미지 제공 장치(110)는 검색 결과 페이지를 웹 뷰에 로드할 수 있다. In step S710, the
단계 S720에서 이미지 제공 장치(110)는 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출할 수 있다. In step S720, the
단계 S730에서 이미지 제공 장치(110)는 추출된 이미지를 웹 뷰의 캔버스에 렌더링할 수 있다. In step S730, the
단계 S740에서 이미지 제공 장치(110)는 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출할 수 있다. In step S740, the
단계 S750에서 이미지 제공 장치(110)는 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 결합 영역을 생성할 수 있다. In step S750, the
단계 S760에서 이미지 제공 장치(110)는 결합 영역과 비결합 영역을 화면 단위로 표시할 수 있다. In step S760, the
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 검색 결과 페이지에 따라 검출된 장면 영역을 인덱싱하여 배열시키는 단계 및 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of creating a combined region may further include indexing and arranging the detected scene region according to the search result page, and determining whether the adjacent scene regions are combined according to the indexing .
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치(110)의 화면 크기에 기초하여 인접하는 장면 영역 및 배경 영역을 결합하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of creating a combining area may include combining a neighboring scene area and a background area based on a screen size of the
도 7에서는 도시되지 않았으나, 결합 영역을 생성하는 단계는 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 인접하는 장면 영역 및 배경 영역을 결합하는 단계를 더 포함할 수 있다.Although not shown in FIG. 7, the step of creating a combining region may further include combining adjacent scene regions and background regions based on a height of a background region existing between adjacent scene regions.
상술한 설명에서, 단계 S710 내지 S760은 본 발명의 구현예에 따라서, 추가적인 단계들로 더 분할되거나, 더 적은 단계들로 조합될 수 있다. 또한, 일부 단계는 필요에 따라 생략될 수도 있고, 단계 간의 순서가 전환될 수도 있다.In the above description, steps S710 to S760 may be further divided into further steps or combined into fewer steps, according to an embodiment of the present invention. In addition, some of the steps may be omitted as necessary, and the order between the steps may be switched.
도 1 내지 도 7을 통해 설명된 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 컴퓨터에 의해 실행되는 매체에 저장된 컴퓨터 프로그램 또는 컴퓨터에 의해 실행 가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 또한, 도 1 내지 도 7을 통해 설명된 이미지 제공 장치에서 웹 브라우저에 표시된 검색 결과 페이지로부터 이미지를 제공하는 방법은 컴퓨터에 의해 실행되는 매체에 저장된 컴퓨터 프로그램의 형태로도 구현될 수 있다. A method of providing an image from a search result page displayed in a web browser in the image providing apparatus described with reference to Figs. 1 to 7 may be performed by a computer program stored in a medium executed by a computer or a recording medium including instructions executable by the computer But may also be implemented in other forms. In addition, the method of providing an image from the search result page displayed in the web browser in the image providing apparatus described with reference to Figs. 1 to 7 can also 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. The computer-readable medium may also include computer storage media. 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.
전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다. It will be understood by those skilled in the art that the foregoing description of the present invention is for illustrative purposes only and that those of ordinary skill in the art can readily understand that various changes and modifications may be made without departing from the spirit or essential characteristics of the present invention. will be. It is therefore to be understood that the above-described embodiments are illustrative in all aspects and not restrictive. For example, each component described as a single entity may be distributed and implemented, and components described as being distributed may also be implemented in a combined form.
본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다. The scope of the present invention is defined by the appended claims rather than the detailed description and all changes or modifications derived from the meaning and scope of the claims and their equivalents are to be construed as being included within the scope of the present invention do.
110: 이미지 제공 장치
310: 로드부
320: 추출부
330: 렌더링부
340: 영역 검출부
350: 영역 결합부
360: 표시부
370: 매핑부
380: 스크롤링부110: image providing device
310:
320:
330:
340:
350:
360: Display
370:
380: scrolling part
Claims (19)
상기 검색 결과 페이지를 웹 뷰에 로드하는 로드부;
상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 추출부;
상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 렌더링부;
상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 영역 검출부;
상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 영역 결합부; 및
상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 표시부
를 포함하는, 이미지 제공 장치.
An apparatus for providing an image from a search result page displayed in a web browser,
A load unit loading the search result page into a web view;
An extracting unit for extracting at least one image extracted from the loaded search result page;
A rendering unit for rendering the extracted image on a canvas of the web view;
An area detector for detecting at least one background area and a scene area from the canvas on which the image is rendered;
An area combining unit for dividing the detected scene area into a combined area capable of being combined with a non-combined area that is incapable of combining, and generating the combined area; And
A display unit for displaying the combined area and the non-combined area on a screen basis;
And an image processing device.
상기 추출부는 상기 검색 결과 페이지에 포함된 선택자에 기초하여 상기 이미지를 추출하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the extracting unit extracts the image based on a selector included in the search result page.
상기 추출부는 상기 검색 결과 페이지에 포함된 선택자가 존재하지 않는 경우, 상기 검색 결과 페이지 내에서 기설정된 영역 이상을 차지하는 이미지 및 상기 이미지와 동일한 구조를 가지는 노드에 기초하여 상기 이미지를 추출하는 것인, 이미지 제공 장치.
3. The method of claim 2,
Wherein the extracting unit extracts the image based on an image occupying more than a predetermined area in the search result page and a node having the same structure as the image when the selector included in the search result page does not exist, Image providing device.
상기 렌더링부는 상기 추출된 이미지의 URL에 기초하여 상기 검색 결과 페이지에서의 실제 배치 순서에 따라 상기 추출된 이미지를 상기 캔버스에 렌더링하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the rendering unit renders the extracted image on the canvas according to an actual arrangement order on the search result page based on the URL of the extracted image.
상기 영역 검출부는 상기 렌더링된 이미지로부터 빈도수가 높은 컬러를 배경색으로 선정하고, 상기 선정된 배경색에 기초하여 상기 배경 영역 및 상기 장면 영역을 검출하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the area detecting unit selects a color having a high frequency from the rendered image as a background color and detects the background area and the scene area based on the selected background color.
상기 영역 검출부는 상기 렌더링된 이미지를 픽셀 행 단위로 분석하여 상기 배경색으로만 구성되는 영역을 배경 영역으로 검출하고, 상기 렌더링된 이미지 중 상기 배경 영역에 해당하지 않는 적어도 하나의 픽셀 행을 상기 장면 영역으로 검출하는 것인, 이미지 제공 장치.
6. The method of claim 5,
Wherein the region detecting unit analyzes the rendered image in units of pixel rows to detect a region constituted only of the background color as a background region, and detects at least one pixel row not corresponding to the background region from the rendered region, By the image pickup device.
상기 영역 결합부는 상기 검색 결과 페이지에 따라 상기 검출된 장면 영역을 인덱싱하여 배열시키고, 상기 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the area combining unit indexes and arranges the detected scene area according to the search result page, and judges whether or not the adjacent scene areas are combined according to the indexing.
상기 영역 결합부는 상기 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치의 화면 크기에 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 것인, 이미지 제공 장치.
8. The method of claim 7,
Wherein the area combining unit combines the adjacent scene area and the background area based on a screen size of the image providing apparatus when a background area exists between the adjacent scene areas.
상기 영역 결합부는 상기 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 것인, 이미지 제공 장치.
9. The method of claim 8,
Wherein the area combining unit combines the adjacent scene area and the background area based on a height of a background area existing between the adjacent scene areas.
상기 표시부는 상기 장면 영역을 상기 웹 뷰에 오버레이하여 렌더링하는 경우, 상기 웹 뷰 내에 기렌더링된 객체를 비시각화하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the display unit non-visualizes the previously rendered object in the web view when rendering the scene region overlaid on the web view.
상기 표시부는 상기 장면 영역을 별도의 뷰어를 통해 렌더링하는 경우, 상기 웹 뷰를 비시각화하는 것인, 이미지 제공 장치.
The method according to claim 1,
Wherein the display unit non-visualizes the web view when rendering the scene region through a separate viewer.
상기 표시부는 상기 배열된 장면 영역을 기설정된 속도에 따라 장면이 전환되는 슬라이드 형태로 표시하는 것인, 이미지 제공 장치.
8. The method of claim 7,
Wherein the display unit displays the arranged scene area in a slide form in which a scene is switched according to a predetermined speed.
상기 표시부는 이미지 제공 장치의 화면 크기에 기초하여 특정 장면 영역이 상기 화면 크기를 초과하는 경우 상기 특정 장면 영역에서의 스크롤링을 수행하는 것인, 이미지 제공 장치.
13. The method of claim 12,
Wherein the display unit performs scrolling in the specific scene region when the specific scene region exceeds the screen size based on the screen size of the image providing apparatus.
상기 웹 뷰에 로드된 상기 검색 결과 페이지의 좌표 정보와 상기 캔버스에 렌더링된 이미지의 좌표 정보를 매핑하는 매핑부; 및
상기 캔버스에 렌더링된 이미지의 좌표 정보에 기초하여 상기 장면이 전환됨에 따라 상기 웹 뷰에 로드된 상기 검색 결과 페이지에 대한 스크롤링을 수행하는 스크롤링부
더 포함하는 것인, 이미지 제공 장치.
13. 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 the rendered image on the canvas; And
A scrolling unit for scrolling the search result page loaded in the web view upon switching the scene based on the coordinate information of the rendered image on the canvas,
Wherein the image processing apparatus further comprises:
상기 스크롤링부는 상기 검색 결과 페이지에 대한 스크롤링을 수행하면서 상기 검색 결과 페이지의 좌표 정보에 대응하는 이벤트를 발생시키는 것인, 이미지 제공 장치.
15. The method of claim 14,
Wherein the scrolling unit scrolls the search result page and generates an event corresponding to the coordinate information of the search result page.
상기 검색 결과 페이지를 웹 뷰에 로드하는 단계;
상기 로드된 검색 결과 페이지로부터 추출된 적어도 하나의 이미지를 추출하는 단계;
상기 추출된 이미지를 상기 웹 뷰의 캔버스에 렌더링하는 단계;
상기 이미지가 렌더링된 캔버스로부터 적어도 하나의 배경 영역 및 장면 영역을 구분하여 검출하는 단계;
상기 검출된 장면 영역을 결합이 가능한 결합 영역과 결합이 불가능한 비결합 영역으로 구분하고, 상기 결합 영역을 생성하는 단계; 및
상기 결합 영역과 상기 비결합 영역을 화면 단위로 표시하는 단계
를 포함하는 것인, 이미지 제공 방법.
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;
Detecting at least one background area and a scene area from the canvas on which the image is rendered;
Dividing the detected scene area into a combined area capable of being combined with a non-combined area that is incapable of combining, and creating the combined area; And
Displaying the combined area and the non-combined area on a screen basis
≪ / RTI >
상기 결합 영역을 생성하는 단계,
상기 검색 결과 페이지에 따라 상기 검출된 장면 영역을 인덱싱하여 배열시키는 단계; 및
상기 인덱싱에 따라 인접하는 장면 영역 간의 결합 여부를 판단하는 단계
를 포함하는 것인, 이미지 제공 방법.
17. The method of claim 16,
Creating the coupling region,
Indexing and arranging the detected scene area according to the search result page; And
Determining whether the adjacent scene regions are combined according to the indexing
≪ / RTI >
상기 결합 영역을 생성하는 단계,
상기 인접하는 장면 영역 사이에 배경 영역이 존재하는 경우, 이미지 제공 장치의 화면 크기에 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 단계
를 더 포함하는 것인, 이미지 제공 방법.
18. The method of claim 17,
Creating the coupling region,
Combining the adjacent scene region and the background region based on a screen size of the image providing apparatus when the background region exists between the adjacent scene regions;
The method further comprising:
상기 결합 영역을 생성하는 단계,
상기 인접하는 장면 영역 사이에 존재하는 배경 영역의 높이에 더 기초하여 상기 인접하는 장면 영역 및 상기 배경 영역을 결합하는 단계
를 더 포함하는 것인, 이미지 제공 방법.19. The method of claim 18,
Creating the coupling region,
Combining the adjacent scene region and the background region further based on a height of a background region existing between the adjacent scene regions
The method further comprising:
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 true KR20190004570A (en) | 2019-01-14 |
KR102238812B1 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 (6)
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 |
KR20160092340A (en) * | 2015-01-27 | 2016-08-04 | 네이버 주식회사 | Cartoon displaying method and cartoon displaying device |
KR20160112714A (en) * | 2015-03-20 | 2016-09-28 | 네이버 주식회사 | Apparatus, method, and computer program for creating catoon data, and apparatus for viewing catoon data |
KR101676575B1 (en) * | 2015-07-24 | 2016-11-15 | 주식회사 카카오 | Apparatus and method for extracting share area of comic content |
-
2017
- 2017-07-04 KR KR1020170084974A patent/KR102238812B1/en active IP Right Grant
Patent Citations (6)
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 |
KR20160092340A (en) * | 2015-01-27 | 2016-08-04 | 네이버 주식회사 | Cartoon displaying method and cartoon displaying device |
KR20160112714A (en) * | 2015-03-20 | 2016-09-28 | 네이버 주식회사 | Apparatus, method, and computer program for creating catoon data, and apparatus for viewing catoon data |
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 |
---|---|
KR102238812B1 (en) | 2021-04-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10979761B2 (en) | Intelligent video interaction method | |
US8416332B2 (en) | Information processing apparatus, information processing method, and program | |
JP6457655B2 (en) | Method, apparatus, program, and recording medium for creating graphical user interface | |
JP7195426B2 (en) | Display page interaction control method and apparatus | |
US9003324B2 (en) | Control device and control method thereof | |
US10891032B2 (en) | Image reproduction apparatus and method for simultaneously displaying multiple moving-image thumbnails | |
US20210398249A1 (en) | Image distribution device, image distribution system, image distribution method, and image distribution program | |
JP5630541B2 (en) | Information processing apparatus, information processing method, and program | |
US20140115473A1 (en) | Apparatus and method for converting 2d content into 3d content, and computer-readable storage medium thereof | |
US20160012851A1 (en) | Image processing device, image processing method, and program | |
CN114296949A (en) | Virtual reality equipment and high-definition screen capturing method | |
KR101791917B1 (en) | Method for automatically converting normal video to virtual reality video and device using the same | |
US20120293638A1 (en) | Apparatus and method for providing 3d content | |
KR102426089B1 (en) | Electronic device and Method for generating summary image of electronic device | |
US20140258816A1 (en) | Methodology to dynamically rearrange web content for consumer devices | |
KR20210107738A (en) | Video distribution device, video distribution system, video distribution method and video distribution program | |
US11128927B2 (en) | Content providing server, content providing terminal, and content providing method | |
KR102238812B1 (en) | Appratus and method for providing image from search result page displayed by web browser | |
CN114880606A (en) | Page display method, device, equipment, medium and program product | |
CN115278346A (en) | Method for sending comments and receiving comments in live broadcast room and related equipment | |
KR101825598B1 (en) | Apparatus and method for providing contents, and computer program recorded on computer readable recording medium for executing the method | |
KR20180101984A (en) | Device for providing user interface to web browser | |
KR100616425B1 (en) | High quality streaming service system for moving pictures | |
CN117812377A (en) | Display device and intelligent editing method | |
CN111124580A (en) | File display method and device |
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 |