Home Rails 5.1 - MiniMagick & Jcrop for Carrierwave Image Upload
Reply: 0

Rails 5.1 - MiniMagick & Jcrop for Carrierwave Image Upload

user42434
1#
user42434 Published in September 19, 2018, 3:16 am

I have an image uploader & cropping method for uploads. However once I upload the image the selected cropping area is not selected and instead is cropping a different area of the image.

I initiate the cropping method using the call back :after_update

Rails 5.1 - MiniMagick - Carrierwave - JQuery-Jcrop

app/uploaders/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  include CarrierWave::MiniMagick

  storage :aws

  def store_dir
    if Rails.env == 'development'
      "development/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    elsif Rails.env == 'staging'
      "stage/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    elsif Rails.env == 'production'
      "production/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    end
  end

  version :large do
    process resize_to_limit: [1024, 1024]
  end

  version :medium, :from_version => :large do
    process resize_to_limit: [800, 800]
  end

  version :small, :from_version => :medium do
    process resize_to_limit: [300, 300]
  end

  version :thumb, :from_version => :small do
    process resize_to_limit: [100, 100]
  end

  version :square do
    process :crop
    process resize_to_fill: [600, 600]
  end

  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  def crop
    if model.crop_x.present?
      resize_to_limit(600,600)
      manipulate! do |img|
        x = model.crop_x.to_i
        y = model.crop_y.to_i
        w = model.crop_w.to_i
        h = model.crop_h.to_i
        img.crop("#{w}x#{h}+#{x}+#{y}")
        img
      end
    end
  end

end

/form.html.erb

...
<%= form.hidden_field "crop_x", id: "crop_x" %>
<%= form.hidden_field "crop_y", id: "crop_y" %>
<%= form.hidden_field "crop_w", id: "crop_w" %>
<%= form.hidden_field "crop_h", id: "crop_h" %>

<div id="image_upload">
  <div class="image-upload">
     <div class="field" style="width:600px; min-height:400px;">
        <img style="width:100%;" id="cropbox" onload="javascript:initiateImageCropper()">
          <%= form.file_field :image, id: :image, onchange: 'mountImageUpload(event)' %>
      </div>
    </div>
  </div>

  <div id="image_preview">
      <div class="image-preview">
        <div style="width:100px; height:100px; overflow:hidden;">
          <img id="preview">
        </div>
      </div>
  </div>
...
share|improve this question

active oldest votes

Your Answer

StackExchange.ifUsing("editor", function () { StackExchange.using("externalEditor", function () { StackExchange.using("snippets", function () { StackExchange.snippets.init(); }); }); }, "code-snippets"); StackExchange.ready(function() { var channelOptions = { tags: "".split(" "), id: "1" }; initTagRenderer("".split(" "), "".split(" "), channelOptions); StackExchange.using("externalEditor", function() { // Have to fire editor after snippets, if snippets enabled if (StackExchange.settings.snippets.snippetsEnabled) { StackExchange.using("snippets", function() { createEditor(); }); } else { createEditor(); } }); function createEditor() { StackExchange.prepareEditor({ heartbeatType: 'answer', convertImagesToLinks: true, noModals: false, showLowRepImageUploadWarning: true, reputationToPostImages: 10, bindNavPrevention: true, postfix: "", onDemand: true, discardSelector: ".discard-answer" ,immediatelyShowMarkdownHelp:true }); } });
 
StackExchange.ready( function () { StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48452378%2frails-5-1-minimagick-jcrop-for-carrierwave-image-upload%23new-answer', 'question_page'); } );

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged ruby-on-rails ruby carrierwave jcrop minimagick or ask your own question.

StackExchange.ready(function(){$.get('/posts/48452378/ivc/a6b2');});
StackExchange.ready(function () { StackExchange.responsiveness.addSwitcher(); }) (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); StackExchange.ready(function () { StackExchange.ga.init({ sendTitles: true, tracker: window.ga, trackingCodes: [ 'UA-108242619-1' ] }); StackExchange.ga.setDimension('dimension2', '|ruby-on-rails|ruby|carrierwave|jcrop|minimagick|'); StackExchange.ga.setDimension('dimension3', 'Questions/Show'); StackExchange.ga.trackPageView(); }); /**/ var _qevents = _qevents || [], _comscore = _comscore || []; (function() { var ssl = 'https:' == document.location.protocol, s = document.getElementsByTagName('script')[0], qc = document.createElement('script'); qc.async = true; qc.src = (ssl ? 'https://secure' : 'http://edge') + '.quantserve.com/quant.js'; s.parentNode.insertBefore(qc, s); _qevents.push({ qacct: "p-c1rF4kxgLUzNc" }); /**/ var sc = document.createElement('script'); sc.async = true; sc.src = (ssl ? 'https://sb' : 'http://b') + '.scorecardresearch.com/beacon.js'; s.parentNode.insertBefore(sc, s); _comscore.push({ c1: "2", c2: "17440561" }); })();
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.259941 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO