FANDOM


Unlike a warrior image, the campaign / event descriptions span several screens. To convert these screenshots into a single image, all you need is a browser (Firefox with Firebug extension) and ImageMagick.

First, put all your screenshot into a single html file. This file looks as follows (note the different height of the last image):

<html>
     <head>
       <style>
         div {position:relative;width:640px;overflow:hidden;display:block;}
         img {position:absolute;}
       </style>
     </head>
     <body>
       <div style="height:691px">
         <img style="top:-297px;clip:(297px,auto,auto,auto)" src="IMG_0001.PNG">
       </div>
       <div style="height:691px">
         <img style="top:-297px;clip:(297px,auto,auto,auto)" src="IMG_0002.PNG">
       </div>
       ...
       <div style="height:691px">
         <img style="top:-297px;clip:(297px,auto,auto,auto)" src="IMG_0006.PNG">
       </div>
       <div style="height:693px">
         <img style="top:-297px;clip:(297px,auto,auto,auto)" src="IMG_0007.PNG">
       </div>
     </body>
   </html>

Now, open that file in Firebug and pick the first image with the Firebug extension. You are now able to change the height value (just select it and use up/down or type a new value) to shift and fit adjacent images. If you need to cut some lines off from the top of an image (you normally need not), change the top value.

Now you know how much of each image has to be cut to get your single screenshot.

To make your life easier, there is a tool (campaign.rb) which creates the *.html file from screenshots and finally creates the combined screenshot image based on this html file (and thus does all but the image shifting). It requires only ruby, ImageMagick, and the following directory struture:

Campaign # name is not important
Campaign/campaign.rb
Campaign/Metamorphosis/
Campaign/Metamorphosis/About/
Campaign/Metamorphosis/About/IMG_0057.PNG
...
Campaign/Metamorphosis/About/IMG_0061.PNG
Campaign/Metamorphosis/About/IMG_0062.PNG
Campaign/Metamorphosis/Guild Rewards/
Campaign/Metamorphosis/Guild Rewards/IMG_0064.PNG
...
Campaign/Metamorphosis/Guild Rewards/IMG_0066.PNG

Use "Default" if there is no event section like "About". The screenshot names are used in alphabetical order (and need to match the pattern IMG_*.PNG).

You may now call

cd Campaign
ruby campaign.rb Metamorphosis prepare

to create

Campaign/Metamorphosis/About/pic.html
Campaign/Metamorphosis/Guild Rewards/pic.html

After you've finished image positioning and written all styles back to (every) pic.html, you finally call

ruby campaign.rb Metamorphosis picturize

to create the combined screenshots

Campaign/Metamorphosis/About.png
Campaign/Metamorphosis/Guild Rewards.png
...

And here is the code for campaign.rb:

#!/usr/bin/env ruby
  
  require 'fileutils'
  
  class Campaign
  
    attr_reader :name
  
    def initialize(name)
      File.directory?(name) or raise "Campaign #{name} not found"
      @name = name
    end
  
    def picturize
      clean
      Dir.chdir(name) do
        Dir.glob("*/pic.html").each do |html_file|
          name = File.dirname(html_file)
          target = "#{name}.png"
          if File.exist?(target)
            puts "Skipping #{target} (exists)"
            next
          end
          html = File.read(html_file)
          Dir.chdir(name) do
            html.gsub("\n", "").gsub(/<!--.*?-->/, "").scan(/height:(\d+)px.*?top:-(\d+)px.*?src="(IMG_\d+.PNG)"/).each_with_index do |(h, off, pic), index|
              convert(pic, "-crop", "640x#{h}+0+#{off}", "+repage", "cut-#{"%02d" % index}.png")
            end
          end
          call = ["-append"]
          call.concat(Dir.glob("#{name}/cut-*.png").sort)
          call << target
          convert(*call)
        end
      end
    end
  
    def prepare
      Dir.chdir(name) do
        Dir.glob("*").each do |part|
          Dir.chdir(part) do
            target = "pic.html"
            if File.exist?(target)
              puts "Skipping #{target}"
              next
            end
            image_lines = []
            images = Dir.glob("IMG_*.PNG").sort
            html_code = self.html_code
            images[0..-2].each do |image|
              html_code = html_code.sub("IMAGES", image_code(image) + "IMAGES")
            end
            html_code = html_code.sub("IMAGES", image_code(images.last, 2))
            File.open(target, "w") do |f|
              f.print html_code
            end
          end
        end
      end
    end
  
    def convert(*args)
      puts("Convert #{args.join(" ")}")
      system("convert", *args)
    end
  
    def image_code(image, additional = 0)
      [
        %!<div style="height:#{691 + additional}px">!,
        %!  <img style="top:-297px;clip:(297px,auto,auto,auto)" src="#{image}">!,
        %!</div>!,
        ""
      ].join("\n")
    end
  
    def html_code
      return <<-EOD
  <html>
    <head>
      <style>
        div {
          position:relative;
          width:640px;
          overflow:hidden;
          display:block;
        }
        img {
          position:absolute;
        }
      </style>
    </head>
    <body>
  IMAGES
    </body>
  </html>
      EOD
    end
  
    def clean
      Dir.chdir(name) do
        Dir.glob("*/cut-*.png").each do |temp|
          FileUtils.rm temp
        end
      end
    end
  
  end
  
  Dir.chdir(File.dirname(__FILE__))
  name = ARGV.shift or raise "Campaign not specified"
  campaign = Campaign.new(name)
  campaign.send(ARGV.shift || "picturize")
  

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.