How to mask an image with Active Storage and mini_magick











up vote
0
down vote

favorite












I'm trying to create an avatar that is circular instead of a rectangle.



The rails code below successfully resizes and crops the image. I'm using Active Storage to upload the file. However I'm struggling to apply a mask to it.



I was trying to composite and use the mini_magick_clip gem, but neither works. Maybe it's just a syntax error, but I couldn't find any examples on the web.



Do you have suggestions on how best to achieve such a circular avatar?






# app/models/comment.rb

class Signature < ApplicationRecord
has_one_attached :image
require "mini_magick"
# require "mini_magick_clip"

def avatar
mask = MiniMagick::Image.open "public/mask.png"
upload = self.image
avatar = upload.variant(
combine_options: {
resize: "160x160^",
gravity: "center",
extent: "160x160",
# mask: mask,
}
).processed

end
end












share|improve this question


























    up vote
    0
    down vote

    favorite












    I'm trying to create an avatar that is circular instead of a rectangle.



    The rails code below successfully resizes and crops the image. I'm using Active Storage to upload the file. However I'm struggling to apply a mask to it.



    I was trying to composite and use the mini_magick_clip gem, but neither works. Maybe it's just a syntax error, but I couldn't find any examples on the web.



    Do you have suggestions on how best to achieve such a circular avatar?






    # app/models/comment.rb

    class Signature < ApplicationRecord
    has_one_attached :image
    require "mini_magick"
    # require "mini_magick_clip"

    def avatar
    mask = MiniMagick::Image.open "public/mask.png"
    upload = self.image
    avatar = upload.variant(
    combine_options: {
    resize: "160x160^",
    gravity: "center",
    extent: "160x160",
    # mask: mask,
    }
    ).processed

    end
    end












    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm trying to create an avatar that is circular instead of a rectangle.



      The rails code below successfully resizes and crops the image. I'm using Active Storage to upload the file. However I'm struggling to apply a mask to it.



      I was trying to composite and use the mini_magick_clip gem, but neither works. Maybe it's just a syntax error, but I couldn't find any examples on the web.



      Do you have suggestions on how best to achieve such a circular avatar?






      # app/models/comment.rb

      class Signature < ApplicationRecord
      has_one_attached :image
      require "mini_magick"
      # require "mini_magick_clip"

      def avatar
      mask = MiniMagick::Image.open "public/mask.png"
      upload = self.image
      avatar = upload.variant(
      combine_options: {
      resize: "160x160^",
      gravity: "center",
      extent: "160x160",
      # mask: mask,
      }
      ).processed

      end
      end












      share|improve this question













      I'm trying to create an avatar that is circular instead of a rectangle.



      The rails code below successfully resizes and crops the image. I'm using Active Storage to upload the file. However I'm struggling to apply a mask to it.



      I was trying to composite and use the mini_magick_clip gem, but neither works. Maybe it's just a syntax error, but I couldn't find any examples on the web.



      Do you have suggestions on how best to achieve such a circular avatar?






      # app/models/comment.rb

      class Signature < ApplicationRecord
      has_one_attached :image
      require "mini_magick"
      # require "mini_magick_clip"

      def avatar
      mask = MiniMagick::Image.open "public/mask.png"
      upload = self.image
      avatar = upload.variant(
      combine_options: {
      resize: "160x160^",
      gravity: "center",
      extent: "160x160",
      # mask: mask,
      }
      ).processed

      end
      end








      # app/models/comment.rb

      class Signature < ApplicationRecord
      has_one_attached :image
      require "mini_magick"
      # require "mini_magick_clip"

      def avatar
      mask = MiniMagick::Image.open "public/mask.png"
      upload = self.image
      avatar = upload.variant(
      combine_options: {
      resize: "160x160^",
      gravity: "center",
      extent: "160x160",
      # mask: mask,
      }
      ).processed

      end
      end





      # app/models/comment.rb

      class Signature < ApplicationRecord
      has_one_attached :image
      require "mini_magick"
      # require "mini_magick_clip"

      def avatar
      mask = MiniMagick::Image.open "public/mask.png"
      upload = self.image
      avatar = upload.variant(
      combine_options: {
      resize: "160x160^",
      gravity: "center",
      extent: "160x160",
      # mask: mask,
      }
      ).processed

      end
      end






      ruby-on-rails mask minimagick rails-activestorage






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 4 at 9:48









      Ivan Raszl

      1




      1
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          I'd suggest storing and serving your avatars in their original shape. It's easy to make them look circular (or whatever shape you want) using CSS. You can find related question here and an example here.






          share|improve this answer





















          • Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
            – Ivan Raszl
            Nov 4 at 12:01










          • Well, in that case CSS really isn't the right solution.
            – ahawrylak
            Nov 4 at 12:07











          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: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139505%2fhow-to-mask-an-image-with-active-storage-and-mini-magick%23new-answer', 'question_page');
          }
          );

          Post as a guest
































          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          I'd suggest storing and serving your avatars in their original shape. It's easy to make them look circular (or whatever shape you want) using CSS. You can find related question here and an example here.






          share|improve this answer





















          • Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
            – Ivan Raszl
            Nov 4 at 12:01










          • Well, in that case CSS really isn't the right solution.
            – ahawrylak
            Nov 4 at 12:07















          up vote
          0
          down vote













          I'd suggest storing and serving your avatars in their original shape. It's easy to make them look circular (or whatever shape you want) using CSS. You can find related question here and an example here.






          share|improve this answer





















          • Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
            – Ivan Raszl
            Nov 4 at 12:01










          • Well, in that case CSS really isn't the right solution.
            – ahawrylak
            Nov 4 at 12:07













          up vote
          0
          down vote










          up vote
          0
          down vote









          I'd suggest storing and serving your avatars in their original shape. It's easy to make them look circular (or whatever shape you want) using CSS. You can find related question here and an example here.






          share|improve this answer












          I'd suggest storing and serving your avatars in their original shape. It's easy to make them look circular (or whatever shape you want) using CSS. You can find related question here and an example here.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 4 at 10:24









          ahawrylak

          1388




          1388












          • Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
            – Ivan Raszl
            Nov 4 at 12:01










          • Well, in that case CSS really isn't the right solution.
            – ahawrylak
            Nov 4 at 12:07


















          • Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
            – Ivan Raszl
            Nov 4 at 12:01










          • Well, in that case CSS really isn't the right solution.
            – ahawrylak
            Nov 4 at 12:07
















          Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
          – Ivan Raszl
          Nov 4 at 12:01




          Thank you! But it's not a good solution, because I want to use these images in email signatures, and some email applications do not support advanced CSS. It has to be as basic as possible for maximum compatibility.
          – Ivan Raszl
          Nov 4 at 12:01












          Well, in that case CSS really isn't the right solution.
          – ahawrylak
          Nov 4 at 12:07




          Well, in that case CSS really isn't the right solution.
          – ahawrylak
          Nov 4 at 12:07


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139505%2fhow-to-mask-an-image-with-active-storage-and-mini-magick%23new-answer', 'question_page');
          }
          );

          Post as a guest




















































































          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()