Ruby on Rails Usage Examples

Learn how to use the HTML to Image API in your Ruby on Rails application using the Net::HTTP library.

Setup

First, add your API key to your credentials or environment variables:

# config/credentials.yml.enc
html2img:
  api_key: your-api-key

Or using environment variables:

# .env
HTML2IMG_API_KEY=your-api-key

HTML to Image Example

Here’s a simple example of converting HTML to an image:

require 'net/http'
require 'json'

class ImagesController < ApplicationController
  def generate
    # Prepare the request
    uri = URI('https://app.html2img.com/api/html')
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = true

    # Create the request
    request = Net::HTTP::Post.new(uri)
    request['Content-Type'] = 'application/json'
    request['X-API-Key'] = Rails.application.credentials.html2img[:api_key]

    # Set the request body
    request.body = {
      html: '<div style="padding: 20px; background: #f0f0f0;">
        <h1>Hello from Rails!</h1>
        <p>Generated at ' + Time.current.to_s + '</p>
      </div>',
      css: 'h1 { color: #2563eb; } p { color: #4b5563; }',
      width: 800,
      height: 600
    }.to_json

    # Send the request
    response = http.request(request)

    if response.is_a?(Net::HTTPSuccess)
      # Save the image
      filename = "output-#{Time.current.to_i}.png"
      File.binwrite(Rails.root.join('storage', filename), response.body)

      render json: {
        success: true,
        url: url_for(filename)
      }
    else
      render json: {
        success: false,
        message: JSON.parse(response.body)['message'] || 'Unknown error'
      }, status: response.code
    end
  end
end

Screenshot Example

Taking a screenshot of a webpage:

class ImagesController < ApplicationController
  def screenshot
    uri = URI('https://app.html2img.com/api/screenshot')
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = true

    request = Net::HTTP::Post.new(uri)
    request['Content-Type'] = 'application/json'
    request['X-API-Key'] = Rails.application.credentials.html2img[:api_key]

    request.body = {
      url: 'https://example.com',
      width: 1200,
      height: 800,
      dpi: 2,
      fullpage: true
    }.to_json

    response = http.request(request)

    if response.is_a?(Net::HTTPSuccess)
      filename = "screenshot-#{Time.current.to_i}.png"
      File.binwrite(Rails.root.join('storage', filename), response.body)

      render json: {
        success: true,
        url: url_for(filename)
      }
    else
      render json: {
        success: false,
        message: JSON.parse(response.body)['message'] || 'Unknown error'
      }, status: response.code
    end
  end
end

Using with ERB Templates

You can also generate images from ERB templates:

class InvoicesController < ApplicationController
  def generate_image
    # Render the template to a string
    html = render_to_string(
      template: 'invoices/template',
      layout: false,
      locals: { order: Order.find(params[:id]) }
    )

    uri = URI('https://app.html2img.com/api/html')
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = true

    request = Net::HTTP::Post.new(uri)
    request['Content-Type'] = 'application/json'
    request['X-API-Key'] = Rails.application.credentials.html2img[:api_key]

    request.body = {
      html: html,
      width: 800,
      height: 600
    }.to_json

    response = http.request(request)

    if response.is_a?(Net::HTTPSuccess)
      filename = "invoice-#{Time.current.to_i}.png"
      File.binwrite(Rails.root.join('storage', filename), response.body)

      render json: {
        success: true,
        url: url_for(filename)
      }
    else
      render json: {
        success: false,
        message: JSON.parse(response.body)['message'] || 'Unknown error'
      }, status: response.code
    end
  end
end

Using ActiveStorage

If you’re using ActiveStorage, you can attach the generated image to your models:

class Order < ApplicationRecord
  has_one_attached :invoice_image
end

class InvoicesController < ApplicationController
  def generate_image
    order = Order.find(params[:id])
    
    # Generate HTML from template
    html = render_to_string(
      template: 'invoices/template',
      layout: false,
      locals: { order: order }
    )

    # Make API request
    uri = URI('https://app.html2img.com/api/html')
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = true

    request = Net::HTTP::Post.new(uri)
    request['Content-Type'] = 'application/json'
    request['X-API-Key'] = Rails.application.credentials.html2img[:api_key]

    request.body = {
      html: html,
      width: 800,
      height: 600
    }.to_json

    response = http.request(request)

    if response.is_a?(Net::HTTPSuccess)
      # Attach the image to the order
      order.invoice_image.attach(
        io: StringIO.new(response.body),
        filename: "invoice-#{order.id}.png",
        content_type: 'image/png'
      )

      render json: {
        success: true,
        url: url_for(order.invoice_image)
      }
    else
      render json: {
        success: false,
        message: JSON.parse(response.body)['message'] || 'Unknown error'
      }, status: response.code
    end
  end
end

Routes Configuration

Add these routes to your config/routes.rb:

Rails.application.routes.draw do
  post 'generate_image', to: 'images#generate'
  post 'take_screenshot', to: 'images#screenshot'
  post 'generate_invoice_image', to: 'invoices#generate_image'
end