canvas-resize-rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d585ef9707a4b802805b8cb2ce6c2d346e498299
+  data.tar.gz: 79dd6fbb1d91a603b2491ef195dfa401dd9773b7
+SHA512:
+  metadata.gz: fcedfc79ca4e762e9268ad8b87a4034649e3d73ffe5a39256d47e50b1321a58c6201c4e70b3bc379d753c687a08d85a83509a6ca78ae7b64db103ada4cc5886b
+  data.tar.gz: a570c4b9f7f1f164d0c73a00255a7bfc265fb73af1a932f3c2598753f0afc43f065d55261ce9dfcd8fa620cbe314217750fb4fed5fbecf8323b296bd301c10d8

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in canvas-resize-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 maedana
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,45 @@
+# Canvas::Resize::Rails
+
+[canvasResize](https://github.com/gokercebeci/canvasResize)をRails+carrierwaveで簡単に使えるようにする
+
+## インストール
+
+Gemファイルに以下を追加
+
+```ruby
+gem 'canvas-resize-rails'
+```
+
+application.jsに以下を追加
+
+```javascript
+//= require canvas-resize-sprockets
+```
+
+## 使い方
+
+carrierwaveのmodelをProfile, 対象のカラム名をimageとする場合、対象のmodelに以下のように設定
+
+```ruby
+  mount_uploader :image, ImageUploader
+  canvas_resize :image
+```
+
+formで例えば以下のようになっている場合、
+
+```haml
+= simple_form_for(@profile) do |f|
+  = f.input :image, as: :file, input_html: { class: 'resize_trigger' }
+```
+
+jsで以下のようにする。
+
+```coffee
+$("input.resize_trigger").prepareToResizeForAll()
+```
+
+これでファイルに画像を設定するタイミングで自動的に以下の処理が行われる
+* profile[image_base64]というhidden_fieldにbase64でエンコードされた画像が設定される
+* profile[image_file_name]というhidden_fieldにファイル名が設定される
+
+この状態でsubmitするとリサイズ済みのファイルがcarrierwaveを通じて保存される

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/canvas-resize-sprockets.js

@@ -0,0 +1,3 @@
+//= require jquery.canvasResize
+//= require jquery.exif
+//= require canvas-resize

data/app/assets/javascripts/canvas-resize.js.coffee

@@ -0,0 +1,40 @@
+$ ->
+  jQuery.fn.extend
+    prepareToResizeForAll: ->
+      isImageFile = (file) ->
+        return (/image/i).test(file.type)
+
+      processFile = (file, base64FieldName, fileNameFieldName, form) ->
+        # Ref) http://lealog.hateblo.jp/entry/2013/03/21/212608
+        # TODO 外からoptionを渡せるようにする
+        $.canvasResize file,
+          width: 800
+          height: 0
+          crop: false
+          quality: 80
+          callback: (data, width, height) ->
+            resizedData     = "<input type='hidden' name='#{base64FieldName}' value='#{data}'>"
+            resizedFileName = "<input type='hidden' name='#{fileNameFieldName}' value='#{file.name}'>"
+            $(form).append(resizedData)
+            $(form).append(resizedFileName)
+
+      $(this).change (e) ->
+        unless window.File and window.FileReader and window.FileList and window.Blob
+          console.log "The File APIs are not fully supported in this browser."
+          return false
+
+        modelName = $(this).attr('id').split('_')[0]
+        columnName = $(this).attr('id').split('_')[1]
+        fileField = e.target
+        form = $(fileField).closest('form')[0]
+
+        # ファイル再選択時に不要なhiddenを削除
+        $(form).find("input[name*=#{columnName}_base64\\]]").remove()
+        $(form).find("input[name*=#{columnName}_file_name\\]]").remove()
+
+        file = fileField.files[0]
+        if isImageFile(file)
+          base64FieldName   = "#{modelName}[#{columnName}_base64]"
+          fileNameFieldName = "#{modelName}[#{columnName}_file_name]"
+          processFile file, base64FieldName, fileNameFieldName, form
+

data/canvas-resize-rails.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'canvas/resize/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "canvas-resize-rails"
+  spec.version       = Canvas::Resize::Rails::VERSION
+  spec.authors       = ["maedana"]
+  spec.email         = ["maeda.na@gmail.com"]
+  spec.summary       = %q{Use canvasResize with Rails and carrierwave}
+  spec.description   = %q{This gem provides canvasResize driver for your Rails Application}
+  spec.homepage      = "https://github.com/maedana/canvas-resize-rails"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.5"
+  spec.add_development_dependency "rake"
+  spec.add_dependency 'activesupport', '~>3.2'
+  spec.add_dependency 'activerecord', '~>3.2'
+end

data/lib/canvas-resize-rails.rb

@@ -0,0 +1 @@
+require 'canvas/resize/rails'

data/lib/canvas/resize/models/active_record.rb

@@ -0,0 +1,16 @@
+require 'active_record'
+require 'canvas/resize/models/base64_decodable'
+
+module Canvas
+  module Resize
+    module Model
+      module ActiveRecord
+        def canvas_resize column
+          include ::Canvas::Resize::Model::Base64Decodable
+          before_validation :decode_base64_image
+          data_field_prefix column
+        end
+      end
+    end
+  end
+end

data/lib/canvas/resize/models/base64_decodable.rb

@@ -0,0 +1,59 @@
+require 'active_support'
+module Canvas
+  module Resize
+    module Model
+      module Base64Decodable
+        extend ::ActiveSupport::Concern
+
+        module ClassMethods
+          def data_field_prefix(prefix)
+            class_attribute :_data_field_prefix
+            self._data_field_prefix = prefix
+
+            sym_base64 = "#{self._data_field_prefix}_base64".to_sym
+            attr_accessible sym_base64
+            attr_accessor sym_base64
+
+            sym_file_name = "#{self._data_field_prefix}_file_name".to_sym
+            attr_accessible sym_file_name
+            attr_accessor sym_file_name
+          end
+        end
+
+        def data_field_prefix
+          self.class._data_field_prefix.to_s
+        end
+
+        def base64_field
+          self.send("#{data_field_prefix}_base64")
+        end
+
+        def file_name_field
+          self.send("#{data_field_prefix}_file_name")
+        end
+
+        def data_field=(data)
+          self.send("#{data_field_prefix}=", data)
+        end
+
+        def blank_base64_data?
+          base64_field.blank? || file_name_field.blank?
+        end
+
+        def decode_base64_image
+          unless blank_base64_data?
+            # base64_field should be like "data:image/jpeg;base64,/9j/4AAQ..."
+            splitted_data = base64_field.split(/[:;,]/, 4)
+            decoded_data = Base64.decode64(splitted_data.last)
+
+            self.data_field = StringIO.new(decoded_data).tap do |data|
+              data.class_eval{ attr_accessor :original_filename, :content_type }
+              data.content_type = splitted_data.second
+              data.original_filename = File.basename(file_name_field)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/canvas/resize/rails.rb

@@ -0,0 +1,10 @@
+require 'canvas/resize/rails/engine'
+require 'canvas/resize/rails/railtie'
+require "canvas/resize/rails/version"
+
+module Canvas
+  module Resize
+    module Rails
+    end
+  end
+end

data/lib/canvas/resize/rails/engine.rb

@@ -0,0 +1,8 @@
+module Canvas
+  module Resize
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/canvas/resize/rails/railtie.rb

@@ -0,0 +1,17 @@
+require 'canvas/resize/models/active_record'
+
+module Canvas
+  module Resize
+    module Rails
+      require 'rails'
+      class Railtie < ::Rails::Railtie
+        initializer 'canvas-resize-rails.insert_into_active_record' do
+          ActiveSupport.on_load :active_record do
+            ::ActiveRecord::Base.extend ::Canvas::Resize::Model::ActiveRecord
+          end
+        end
+      end
+    end
+  end
+end
+

data/lib/canvas/resize/rails/version.rb

@@ -0,0 +1,7 @@
+module Canvas
+  module Resize
+    module Rails
+      VERSION = "0.0.1"
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.canvasResize.js

@@ -0,0 +1,313 @@
+/*
+ * jQuery canvasResize plugin
+ * 
+ * Version: 1.2.0 
+ * Date (d/m/y): 02/10/12
+ * Update (d/m/y): 14/05/13
+ * Original author: @gokercebeci 
+ * Licensed under the MIT license
+ * - This plugin working with jquery.exif.js 
+ *   (It's under the MPL License http://www.nihilogic.dk/licenses/mpl-license.txt)
+ * Demo: http://ios6-image-resize.gokercebeci.com/
+ * 
+ * - I fixed iOS6 Safari's image file rendering issue for large size image (over mega-pixel)
+ *   using few functions from https://github.com/stomita/ios-imagefile-megapixel
+ *   (detectSubsampling, )
+ *   And fixed orientation issue by edited http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html
+ *   Thanks, Shinichi Tomita and Jacob Seidelin
+ */
+
+(function($) {
+    var pluginName = 'canvasResize',
+            methods = {
+        newsize: function(w, h, W, H, C) {
+            var c = C ? 'h' : '';
+            if ((W && w > W) || (H && h > H)) {
+                var r = w / h;
+                if ((r >= 1 || H === 0) && W && !C) {
+                    w = W;
+                    h = (W / r) >> 0;
+                } else if (C && r <= (W / H)) {
+                    w = W;
+                    h = (W / r) >> 0;
+                    c = 'w';
+                } else {
+                    w = (H * r) >> 0;
+                    h = H;
+                }
+            }
+            return {
+                'width': w,
+                'height': h,
+                'cropped': c
+            };
+        },
+        dataURLtoBlob: function(data) {
+            var mimeString = data.split(',')[0].split(':')[1].split(';')[0];
+            var byteString = atob(data.split(',')[1]);
+            var ab = new ArrayBuffer(byteString.length);
+            var ia = new Uint8Array(ab);
+            for (var i = 0; i < byteString.length; i++) {
+                ia[i] = byteString.charCodeAt(i);
+            }
+            var bb = (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder);
+            if (bb) {
+                //    console.log('BlobBuilder');        
+                bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder)();
+                bb.append(ab);
+                return bb.getBlob(mimeString);
+            } else {
+                //    console.log('Blob');  
+                bb = new Blob([ab], {
+                    'type': (mimeString)
+                });
+                return bb;
+            }
+        },
+        /**
+         * Detect subsampling in loaded image.
+         * In iOS, larger images than 2M pixels may be subsampled in rendering.
+         */
+        detectSubsampling: function(img) {
+            var iw = img.width, ih = img.height;
+            if (iw * ih > 1048576) { // subsampling may happen over megapixel image
+                var canvas = document.createElement('canvas');
+                canvas.width = canvas.height = 1;
+                var ctx = canvas.getContext('2d');
+                ctx.drawImage(img, -iw + 1, 0);
+                // subsampled image becomes half smaller in rendering size.
+                // check alpha channel value to confirm image is covering edge pixel or not.
+                // if alpha value is 0 image is not covering, hence subsampled.
+                return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
+            } else {
+                return false;
+            }
+        },
+        /**
+         * Update the orientation according to the specified rotation angle
+         */
+        rotate: function(orientation, angle) {
+            var o = {
+                // nothing
+                1: {90: 6, 180: 3, 270: 8},
+                // horizontal flip
+                2: {90: 7, 180: 4, 270: 5},
+                // 180 rotate left
+                3: {90: 8, 180: 1, 270: 6},
+                // vertical flip
+                4: {90: 5, 180: 2, 270: 7},
+                // vertical flip + 90 rotate right
+                5: {90: 2, 180: 7, 270: 4},
+                // 90 rotate right
+                6: {90: 3, 180: 8, 270: 1},
+                // horizontal flip + 90 rotate right
+                7: {90: 4, 180: 5, 270: 2},
+                // 90 rotate left
+                8: {90: 1, 180: 6, 270: 3}
+            };
+            return o[orientation][angle] ? o[orientation][angle] : orientation;
+        },
+        /**
+         * Transform canvas coordination according to specified frame size and orientation
+         * Orientation value is from EXIF tag
+         */
+        transformCoordinate: function(canvas, width, height, orientation) {
+            //console.log(width, height);
+            switch (orientation) {
+                case 5:
+                case 6:
+                case 7:
+                case 8:
+                    canvas.width = height;
+                    canvas.height = width;
+                    break;
+                default:
+                    canvas.width = width;
+                    canvas.height = height;
+            }
+            var ctx = canvas.getContext('2d');
+            switch (orientation) {
+                case 1:
+                    // nothing
+                    break;
+                case 2:
+                    // horizontal flip
+                    ctx.translate(width, 0);
+                    ctx.scale(-1, 1);
+                    break;
+                case 3:
+                    // 180 rotate left
+                    ctx.translate(width, height);
+                    ctx.rotate(Math.PI);
+                    break;
+                case 4:
+                    // vertical flip
+                    ctx.translate(0, height);
+                    ctx.scale(1, -1);
+                    break;
+                case 5:
+                    // vertical flip + 90 rotate right
+                    ctx.rotate(0.5 * Math.PI);
+                    ctx.scale(1, -1);
+                    break;
+                case 6:
+                    // 90 rotate right
+                    ctx.rotate(0.5 * Math.PI);
+                    ctx.translate(0, -height);
+                    break;
+                case 7:
+                    // horizontal flip + 90 rotate right
+                    ctx.rotate(0.5 * Math.PI);
+                    ctx.translate(width, -height);
+                    ctx.scale(-1, 1);
+                    break;
+                case 8:
+                    // 90 rotate left
+                    ctx.rotate(-0.5 * Math.PI);
+                    ctx.translate(-width, 0);
+                    break;
+                default:
+                    break;
+            }
+        },
+        /**
+         * Detecting vertical squash in loaded image.
+         * Fixes a bug which squash image vertically while drawing into canvas for some images.
+         */
+        detectVerticalSquash: function(img, iw, ih) {
+            var canvas = document.createElement('canvas');
+            canvas.width = 1;
+            canvas.height = ih;
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0);
+            var data = ctx.getImageData(0, 0, 1, ih).data;
+            // search image edge pixel position in case it is squashed vertically.
+            var sy = 0;
+            var ey = ih;
+            var py = ih;
+            while (py > sy) {
+                var alpha = data[(py - 1) * 4 + 3];
+                if (alpha === 0) {
+                    ey = py;
+                } else {
+                    sy = py;
+                }
+                py = (ey + sy) >> 1;
+            }
+            var ratio = py / ih;
+            return ratio === 0 ? 1 : ratio;
+        },
+        callback: function(d) {
+            return d;
+        }
+    },
+    defaults = {
+        width: 300,
+        height: 0,
+        crop: false,
+        quality: 80,
+        'callback': methods.callback
+    };
+    function Plugin(file, options) {
+        this.file = file;
+        this.options = $.extend({}, defaults, options);
+        this._defaults = defaults;
+        this._name = pluginName;
+        this.init();
+    }
+    Plugin.prototype = {
+        init: function() {
+            //this.options.init(this);
+            var $this = this;
+            var file = this.file;
+
+            var reader = new FileReader();
+            reader.onloadend = function(e) {
+                var dataURL = e.target.result;
+                var img = new Image();
+                img.onload = function(e) {
+                    // Read Orientation Data in EXIF
+                    $(img).exifLoadFromDataURL(function() {
+                        var orientation = $(img).exif('Orientation')[0] || 1;
+                        orientation = methods.rotate(orientation, $this.options.rotate);
+
+                        // CW or CCW ? replace width and height
+                        var size = (orientation >= 5 && orientation <= 8)
+                                ? methods.newsize(img.height, img.width, $this.options.width, $this.options.height, $this.options.crop)
+                                : methods.newsize(img.width, img.height, $this.options.width, $this.options.height, $this.options.crop);
+
+                        var iw = img.width, ih = img.height;
+                        var width = size.width, height = size.height;
+
+                        //console.log(iw, ih, size.width, size.height, orientation);
+
+                        var canvas = document.createElement("canvas");
+                        var ctx = canvas.getContext("2d");
+                        ctx.save();
+                        methods.transformCoordinate(canvas, width, height, orientation);
+
+                        // over image size
+                        if (methods.detectSubsampling(img)) {
+                            iw /= 2;
+                            ih /= 2;
+                        }
+                        var d = 1024; // size of tiling canvas
+                        var tmpCanvas = document.createElement('canvas');
+                        tmpCanvas.width = tmpCanvas.height = d;
+                        var tmpCtx = tmpCanvas.getContext('2d');
+                        var vertSquashRatio = methods.detectVerticalSquash(img, iw, ih);
+                        var sy = 0;
+                        while (sy < ih) {
+                            var sh = sy + d > ih ? ih - sy : d;
+                            var sx = 0;
+                            while (sx < iw) {
+                                var sw = sx + d > iw ? iw - sx : d;
+                                tmpCtx.clearRect(0, 0, d, d);
+                                tmpCtx.drawImage(img, -sx, -sy);
+                                var dx = Math.floor(sx * width / iw);
+                                var dw = Math.ceil(sw * width / iw);
+                                var dy = Math.floor(sy * height / ih / vertSquashRatio);
+                                var dh = Math.ceil(sh * height / ih / vertSquashRatio);
+                                ctx.drawImage(tmpCanvas, 0, 0, sw, sh, dx, dy, dw, dh);
+                                sx += d;
+                            }
+                            sy += d;
+                        }
+                        ctx.restore();
+                        tmpCanvas = tmpCtx = null;
+
+                        // if cropped or rotated width and height data replacing issue 
+                        var newcanvas = document.createElement('canvas');
+                        newcanvas.width = size.cropped === 'h' ? height : width;
+                        newcanvas.height = size.cropped === 'w' ? width : height;
+                        var x = size.cropped === 'h' ? (height - width) * .5 : 0;
+                        var y = size.cropped === 'w' ? (width - height) * .5 : 0;
+                        newctx = newcanvas.getContext('2d');
+                        newctx.drawImage(canvas, x, y, width, height);
+
+                        if (file.type === "image/png") {
+                            var data = newcanvas.toDataURL(file.type);
+                        } else {
+                            var data = newcanvas.toDataURL("image/jpeg", ($this.options.quality * .01));
+                        }
+
+                        // CALLBACK
+                        $this.options.callback(data, width, height);
+
+                    });
+                };
+                img.src = dataURL;
+                // =====================================================
+            };
+            reader.readAsDataURL(file);
+
+        }
+    };
+    $[pluginName] = function(file, options) {
+        if (typeof file === 'string')
+            return methods[file](options);
+        else
+            new Plugin(file, options);
+    };
+
+})(jQuery);