<div id="web-camera-container">
    <div id="web-camera"></div>
  </div>

#web-camera {
  margin: auto;
}

#result-image {
  margin-top: 20px;
}

#web-camera-container {
  position: relative;
  img {
    transform: scale(-1, 1);
  }
}

    // 初期設定
    const params = new URLSearchParams(location.search);
    const webCamera = document.getElementById('web-camera');
    Webcam.set({
      width: params.get('width') || 1200,
      height: params.get('height') || 900,
      image_format: 'png',
      flip_horiz: true,
    });
    Webcam.attach('#web-camera');

    // 写真の撮影
    const takeSnapshotButton = document.getElementById('take-snapshot-button');
    takeSnapshotButton.onclick = () => {
      Webcam.snap((dataUri) => {
        webCamera.innerHTML = '<img id="image" src="' + dataUri + '"/>';

        const nextButton = document.getElementById('next-button');
        nextButton.classList.remove('disabled');
        nextButton.onclick = () => {
          const blob = dataURItoBlob(dataUri);
          const form = new FormData(document.forms[0]);
          form.append("photo[image]", blob);

          const request = new XMLHttpRequest();
          request.onreadystatechange = () => {
            if (request.readyState === XMLHttpRequest.DONE) {
              const url = JSON.parse(request.responseText).url;
              window.location = url;
            }
          }
          request.open("POST", "/photos");
          request.send(form);
        }
      });
    }

    def remove
      api_key = ENV['REMOVE_BG_KEY']
      conn = Faraday.new('https://api.remove.bg', headers: {
          "X-Api-Key" => api_key
      }) do |f|
        f.request :multipart
        f.request :url_encoded
        f.adapter :net_http
      end

      response = conn.post('/v1.0/removebg',
                           image_file: Faraday::UploadIO.new(current_path, 'image/png'),
                           size: 'auto'
      )

      if response.success?
        File.binwrite(current_path, response.body)
      else
        puts "Error: #{response.status} #{response.body}"
      end
    end

    def compose
      manipulate! do |person|
        ibaraki = MiniMagick::Image.open("#{Rails.root}/public#{model.ibaraki_path}")
        hiyorin = MiniMagick::Image.open("#{Rails.root}/public#{model.hiyorin_path}")
        hiyorin.geometry "80%"
        image = ibaraki.composite(hiyorin) do |c|
          c.channel "RGBA"
          c.compose "Over"
          c.geometry "-200-0"
          c.gravity "Southwest"
        end
        person.format "png"
        image = image.composite(person) do |c|
          c.compose "Over"
          c.geometry "-0-0"
          c.gravity "Southeast"
        end
        image
      end
    end

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  storage Rails.env.production? ? :fog : :file

  def prefix
    Rails.env.production? ? '' : 'uploads/'
  end

  def store_dir
    "#{prefix}p/#{model.digest}"
  end

  def full_filename(for_file)
    "original.png"
  end

  version :removed do
    process :remove
    def remove
      # 人物画像の背景切り取り
    end

    def full_filename(for_file)
      'removed.png'
    end
  end

  version :composed, from_version: :removed do
    process resize_to_fit: [1600, 900]
    process :compose
    def compose
      # 画像合成
    end

    def full_filename(for_file)
      "hiyorin.png"
    end
  end
end

  def gen_qrcode(text, options = {})
    qr = RQRCode::QRCode.new(text, options)
    return ChunkyPNG::Image.from_datastream(qr.as_png.resize(500,500).to_datastream).to_data_url
  end

        <div class="content">
          <%= image_tag gen_qrcode @photo.image.composed.url %>
        </div>