_url2png_custom-css-feature.md

Custom CSS

Embed your own CSS in the target page.

Direct Link

custom-css-test.rb

require 'cgi' unless defined?(CGI)
require 'digest' unless defined?(Digest)
 
class Url2png
  attr_reader :apikey, :secret, :query_string, :token
  def initialize options
 
    @apikey = ENV['URL2PNG_APIKEY']
    @secret = ENV['URL2PNG_SECRET']
 
    @query_string = options.sort.map { |k,v| "#{CGI::escape(k.to_s)}=#{CGI::escape(v.to_s)}" }.join("&")
    @token = Digest::MD5.hexdigest(query_string + secret)
  end
 
  def url
    "http://api.url2png.com/v6/#{apikey}/#{token}/png/?#{query_string}"
  end
 
end
 
options = {
  url: "http://google.com/",
  custom_css_url: "http://url2png.com/protips/custom-css/pretty.css",
  viewport: "1024x1024"
}
 
puts Url2png.new(options).url
# http://api.url2png.com/v6/P4DF2F8BC83648/bf659b9e57874b6a9c7c07f99cc9e16d/png/?custom_css_url=http%3A%2F%2Furl2png.com%2Fprotips%2Fcustom-css%2Fpretty.css&url=http%3A%2F%2Fgoogle.com%2F&viewport=1024x1024

pretty.css

body {
  background-image: -webkit-gradient(linear,  left top,  left bottom, 
    color-stop(0.00, red), 
		color-stop(16%, orange),
		color-stop(32%, yellow),
		color-stop(48%, green),
		color-stop(60%, blue),
		color-stop(76%, indigo),
		color-stop(1.00, violet));
}