タグ

画像に関するnekoneneneのブックマーク (5)

  • Shrineを使って画像をアップロードする | RE:ENGINES

    はじめに こんにちは、onoです。 以前、CarrierWaveを使って画像をアップロードするフォームを作成しました。 CarrierWaveは多機能で使いやすいGemだと思いますが、コードが大きく複雑なため、一般的な使い方から外れた場合や問題が発生した場合に処理を追っていくのが大変です。 そこで、今回は実装がシンプルで必要な機能を選んで追加できるShrineを使ってみます。 Shrineとは 簡単な説明 Shrineはファイルをアタッチするためのツールです。 主に画像をアップロードする際に利用されるのではないかと思います。 作者 ShrineはJanko Marohnić氏(リポジトリはこちら)が2015年9月から開発しています。 特徴 主な特徴としては下記の2つが挙げられます。 Shrine体は必要最小限の機能のみを実装しているため、シンプルでコードが小さい。 リサイズやダイレクトア

    Shrineを使って画像をアップロードする | RE:ENGINES
  • Shrineでアップロードする際に画像を加工する – RE:ENGINES

    はじめに こんにちは、onoです。 前回、Shrineを使って画像をアップロードする方法を紹介しました。 今回は、アップロード時に画像を加工する方法を紹介します。 アップロードする画像のリサイズ Gemを追加 Gemfileに下記のGemを追加します。 (HomeBrewなどで事前にimagemagickをインストールしておいてください)

    Shrineでアップロードする際に画像を加工する – RE:ENGINES
  • 【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita

    サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。 1. 内接・外接とは? 画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。 内接リサイズ 外接リサイズ

    【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
    nekonenene
    nekonenene 2017/01/06
    アスペクト比を保ったまま拡大する background-size:cover; なことを img でも
  • PNGファイルを軽量化してくれるWebサービス-TinyPNG

    透過PNGにも対応したPNGファイルを軽量化してくれるWebサービス、「TinyPNG」がこちらの記事「What’s new for designers, July 2012 | Webdesigner Depot」で紹介されていたので使ってみました。 画像の色数を減少させることによってファイルサイズを小さくしているようです。透過PNGにも使えます。 使い方 「TinyPNG – Compress PNG images while preserving alpha transparency」へ行って、「Drop your .png file here!」のところへPNGファイルをドラッグ&ドロップします。画像の軽量化が終わると何%軽量化できたかを表示してくれます。 ”download”をクリックで軽量化されたPNGファイルをダウンロードできます。 TinyPNGで軽量化した画像サンプル 実

    PNGファイルを軽量化してくれるWebサービス-TinyPNG
  • 二次元画像を拡大したいと思ったことはありませんか? - デー

    うまくできましたか? ボヤけたり、ギザギザになったりしませんでしたか? waifu2xをお試しください。 (ブラウザの処理に影響されないようクリックで拡大おねがいします) waifu2xは、二次元画像を2倍に拡大するソフトウェアです。多くの二次元画像についてスゴイ級のクオリティで拡大できます。 waifu2xは、最新鋭の人工知能技術 Deep Convolutional Neural Networks を使って開発されました。 waifu2xの人工知能は、次の問に答えます。 いまから与える画像はある画像を半分に縮小したものである。縮小される前の画像を求めよ。 画像を拡大するのではなく、縮小される前の状態に戻します。 縮小されてないオリジナル画像を与えた場合も、やはり縮小される前の画像を答えます。 その画像は来存在しないものですが、waifu2xはそれを想像で創ります。 二次元画像のJPE

    二次元画像を拡大したいと思ったことはありませんか? - デー
  • 1