AlchemyCMS/alchemy_cms

<div id="jscropper">
<% if @no_image_notice %>
  <%= render_message :warn do %>
    <%= @no_image_notice %>
  <% end %>
<% else %>
  <%= render_message do %>
    <%= simple_format Alchemy.t(:explain_cropping) %>
  <% end %>
  <div class="thumbnail_background">
    <%= image_tag @picture.url(flatten: true), id: 'imageToCrop' %>
  </div>
  <form>
    <%= button_tag Alchemy.t(:apply), type: 'submit' %>
    <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask', type: 'reset' %>
  </form>
</div>
<% end %>
<% if @settings %>
<script type="module">
  import ImageCropper from "alchemy_admin/image_cropper";
  import ImageLoader from "alchemy_admin/image_loader";

  const image = document.getElementById("imageToCrop");

  new ImageLoader(image);
  new ImageCropper(
    image,
    <%= @settings[:min_size].to_json %>,
    <%= @settings[:default_box].to_json %>,
    <%= @settings[:ratio] %>,
    [
      "<%= params[:crop_from_form_field_id] %>",
      "<%= params[:crop_size_form_field_id] %>",
    ],
    <%= @element.id %>
  );
</script>
<% end %>