웹 캡처 및 변환 도구

웹 사이트 스크린 샷 캡처 또는 HTML을 이미지로 변환

루비 API

다음과 같은 기능을 사용하여 웹 페이지의 더 나은 이미지 스크린 샷을 생성하거나 HTML을 직접 이미지로 변환 GrabzIt는 루비 API입니다. 그러나 시작하기 전에 url_to_image, html_to_image or file_to_image 방법 save or save_to 이미지를 생성하려면 메소드를 호출해야합니다.

기본 옵션

웹 페이지의 스크린 샷을 만들려면 하나의 매개 변수 만 필요합니다. HTML 변환 intoa 이미지 다음 예제와 같이.

grabzItClient.url_to_image("https://www.tesla.com")
# Then call the save or save_to method
grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>")
# Then call the save or save_to method
grabzItClient.file_to_image("example.html")
# Then call the save or save_to method

이미지 형식

GrabzIt의 Ruby API는 JPG, PNG, WEBP, BMP (8 비트, 16 비트, 24 비트 또는 32 비트) 및 TIFF를 포함한 여러 형식으로 이미지 스크린 샷을 찍을 수 있습니다. 이미지 스크린 샷의 기본 형식은 JPG입니다. 그러나 JPG 이미지의 품질은 이러한 상황에서 일부 응용 프로그램에 충분하지 않을 수 있습니다. PNG 형식은 이미지 스크린 샷에 권장됩니다. 품질과 파일 크기 사이의 균형이 좋기 때문입니다. 아래 예는 PNG 형식을 사용하여 촬영 한 이미지 스크린 샷을 보여줍니다.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.format = "png"

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.png")

브라우저 크기

브라우저 크기는 대부분의 경우 스크린 샷을 캡처 할 때 사용되는 브라우저 창의 크기를 나타내며 대부분의 모든 작업에 기본 브라우저 크기로 충분하므로 설정할 필요는 없습니다. 브라우저 크기를 설정하려면 값을 browserWidthbrowserHeight 방법 ImageOptions 클래스입니다.

이미지 크기 변경

이미지의 크기를 변경하는 것은 쉽습니다. 이미지를 왜곡하지 않고 이미지를 만드는 것은 조금 더 어렵습니다. 전체 프로세스를 단순화하려면 다음을 사용하는 것이 좋습니다. 간단한 이미지 치수 계산기.

이미지 너비와 높이를 브라우저 너비와 높이보다 큰 크기로 늘리려면 (기본적으로 1366 x 728 픽셀) 브라우저 너비와 높이도 일치하도록 늘려야합니다.

맞춤식 식별자

사용자 지정 식별자를 영상 아래 표시된대로 메소드를 사용하면이 값이 GrabzIt Ruby 핸들러로 리턴됩니다. 예를 들어이 사용자 지정 식별자는 데이터베이스 식별자 일 수 있으며 스크린 샷을 특정 데이터베이스 레코드와 연결할 수 있습니다.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.customId = "123456"

grabzItClient.file_to_image("example.html", options)
# Then call the save method
grabzItClient.save("http://www.example.com/handler/index")

전체 길이 스크린 샷

GrabzIt을 사용하면 전체 웹 페이지의 전체 길이 스크린 샷을 찍어 -1를 browserHeight 방법. 이미지가 브라우저의 크기와 일치하도록하려면 -1를 heightwidth 속성.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.browserHeight = -1
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

자르지 않은 축소판 그림을 반환 할 수도 있지만 큰 이미지를 만들 수 있습니다. 이렇게하려면 -1를 height 및 / 또는 width 행동 양식. -1에 전달 된 치수는 잘리지 않습니다.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.url_to_image("https://www.tesla.com", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.html_to_image("<html><body><h1>Hello World!</h1></body></html>", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

options = GrabzIt::ImageOptions.new()
options.width = -1
options.height = -1

grabzItClient.file_to_image("example.html", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")
전체 길이 브라우저 너비는 없습니다!

이러한 특수 값을 사용하면 원하는 경우 전체 웹 페이지의 전체 버전 인 스크린 샷을 만들 수 있습니다.

페이지 요소의 스크린 샷 찍기

GrabzIt과 같은 HTML 요소의 스크린 샷을 만들 수 있습니다 div or span 태그를 지정하고 모든 콘텐츠를 캡처합니다. 이렇게하려면 스크린 샷을 찍으려는 HTML 요소를 CSS 선택기.

...
<div id="features">
	<img src="http://www.example.com/rocket.jpg"/><h3>Rocket Launch Next Week</h3>
</div>
...

아래 예에서는 id가 "features"인 div를 선택하고 250 x 250px JPEG 이미지로 출력합니다.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

# The 250 parameters indicates that image should be sized to 250 x 250 px
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")

다음 예는 "기능"div의 다른 스크린 샷을 찍지 만 이번에는 div의 정확한 크기 인 JPEG 이미지를 출력합니다.

grabzItClient = GrabzIt::Client.new("Sign in to view your Application Key", "Sign in to view your Application Secret")

# The -1 indicates that image should not be cropped
options = GrabzIt::ImageOptions.new()
options.width = 250
options.height = 250
options.format = "jpg"
options.targetElement = "#features"
options.browserHeight = -1

grabzItClient.url_to_image("http://www.bbc.co.uk/news", options)
# Then call the save or save_to method
grabzItClient.save_to("result.jpg")