inputで画像ファイルを選択したときにその画像を表示する

ファイルを選択するまでは、てきとーにno photo画像をセットしておきます。

また、選択をキャンセルしたときはno photo画像がセットされます。

$(function(){
    function readImage(input) {
        if ( input.files && input.files[0] ) {
            var FR= new FileReader();
            FR.onload = function(e) {
                $('#image').attr( "src", e.target.result );
            };       
            FR.readAsDataURL( input.files[0] );
        }
        else {
            // ファイルが選択されてない
            $('#image').attr( "src", "no_photo.png" );
        }
    }

    $("#file").change(function(){
        readImage( this );
    });
});

<img id="image" src="no_photo.png">
<input id="file" name="photo" type="file">

参考

• javascript - Image convert to Base64 - Stack Overflow

MacBook用スタンドKickflipが便利すぎてもうみんな買えばいいのに

MBAのスタンドほしいなーとおもってたのですがイマイチいいのが見つからず困ってました。

で、知り合いのエンジニアにKickflipを教えてもらい、最高すぎてその場で即ポチりました。

MacBookにそのまま貼り付けるタイプなのでどこでも使えてちょー便利です。

対応サイズは13インチ/15インチ用の２種類ですが、、、、

安心して下さい。11インチでも使えますよ…！！

僕のMBAは11インチですが、13インチ用でも普通に使えます。ぴったり。

横から見るとこんな感じ。5mmくらいしか厚さが変わらず、全然気になりません。

立ててみます。通気性良し、熱がこもりません。

どこでも立てれて普段使いも捗るしかなりイイ感じです。

これがたったの3,000円ちょい。みんな買えばいいのに！

Bluelounge Kickflip MacBook Pro用フリップスタンド 13インチ ブラック BLD-KF13-BK

Bluelounge Kickflip MacBook Pro用フリップスタンド 15インチ ブラック BLD-KF15-BK

Carrierwaveで画像をリサイズする

RMagickを使って画像のリサイズを行います。

今回はサムネイル表示用にバージョンthumbもつくってみます。

gemのインストール

# Gemfile
gem 'carrierwave'
gem 'rmagick' # 今回のリサイズ処理に必要

リサイズ処理を記述

# app/uploaders/image_uploader.rb
...
class CommentImageUploader < CarrierWave::Uploader::Base

    # RMagickをincludeします   
    include CarrierWave::RMagick

    # 1200x900にリサイズします
    process resize_to_limit: [1200, 900]

    # バージョンを作成して、別のリサイズを指定することもできます
    version :thumb do
        process resize_to_limit: [480, 360]
    end
...

画像の表示

モデルはこんな感じなので、

# app/models/users.rb
class User < ActiveRecord::Base
    mount_uploader :avater, ImageUploader
...

画像はこんな感じで表示します。

# app/views/user/show.html.slim
...
    # 画像の表示
    = image_tag @user.avater.url
    # thumb画像の表示
    = image_tag @user.avater.thumb.url
...

画像のリサイズオプションについて

いくつかリサイズオプションがあるのですが、いまいち違いがわからず調べたところ、こちらの記事がかなりわかりやすかったです。

CarrierWave + RMagick 画像のリサイズをまとめてみました - 麺処　まつば

こんにちは。麺処まつば副店長です。久々の投稿ですけど、もう色々気にしないことにしました。店長の視線がなんだって言うんですか。（キッ）さて副店長、先日中ずっとCa...

resize_to_fitとresize_to_limitの違い

両方とも、元画像のアクペクト比を維持したままリサイズしますが、

resize_to_fit：画像が指定した大きさより小さい場合、指定した大きさまで拡大する

resize_to_limit：画像が指定した大きさより小さい場合、なにもしない

拡大してボケるのがいやなので今回はresize_to_limitを使いました。

参考

• carrierwaveuploader/carrierwave
• carrierwave/rmagick.rb at master · carrierwaveuploader/carrierwave
• CarrierWave + RMagick 画像のリサイズをまとめてみました - 麺処　まつば