Fabric.jsを使ってLGTM画像を作る このエントリをはてなブックマークに登録

2015年07月06日

takurutakuru

Fabric.jsという、HTML5のcanvasに使うライブラリがあります。
これは、canvas上にマウスドラッグや拡大縮小、回転などを行えるオブジェクトを描画することができるライブラリです。

Fabric.jsを使用して、画像にLGTMという文字を貼り付けるツールを作ってみました。

デモ

LGTM Maker

このツールを使うことにより、こんな画像が

blueicon

こんな風になります。

my

クールですね。

作り方

HTMLを用意する

fabric.jsを読み込んだHTMLを用意します。
ファイルフォームとcanvasとダウンロードリンクがあります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>LGTM Maker</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="./fabric.min.js"></script>
  <script src="./main.js"></script>
</head>
<body>
  <h1>LGTM Maker</h1>
  <input type="file"><br>
  <canvas id="canvas"></canvas>
  <a href="" id="download" target="_blank">Download</a>
</body>
</html>

ファイルフォームで選択した画像をcanvasに表示する

ファイルフォームで選択した画像をJavaScriptで扱うには、FileReaderオブジェクトを使用します。

// main.js
var maxWidth = 400;
$(function(){
  var canvas = new fabric.Canvas('canvas');
  $('input[type=file]').on('change', function(e){
    var imageReader = new FileReader;
    imageReader.onload = function(e){
      var image = new Image;
      image.onload = function(){
        var fabricImage = new fabric.Image(image);
        var aspect = fabricImage.width / fabricImage.height;
        var width = Math.min(image.width, maxWidth);
        // Fabric.jsのImageオブジェクトを作成
        fabricImage.set({
          selectable: false, // マウスで動かせないようにする
          width:  width,
          height: width / aspect
        });
        // canvasのサイズを画像のサイズに合わせる
        canvas.setWidth(fabricImage.width);
        canvas.setHeight(fabricImage.height);
        canvas.clear();
        // 画像をcanvasに追加(描画)する
        canvas.add(fabricImage);
      };
      image.src = e.target.result;
    };
    imageReader.readAsDataURL(e.target.files[0]); // フォームで選択された画像をセット
  });
});

LGTMの文字を表示する

画像を読み込んだ後に、以下のコードを追加します。

var lgtm = new fabric.Text('LGTM', {
  fontSize: 64,
  fontFamily: 'Impact',
  stroke: '#000', // アウトラインの色
  strokeWidth: 2, // アウトラインの太さ
  fill: '#fff' // 塗りつぶし色
});
canvas.add(lgtm);

画像をダウンロードできるようにする

HTML5にはaタグにはdownload属性というものが存在します。
この属性が付いているaタグは、クリックした時にリンク先をダウンロードさせることが可能です。

このdownload属性に文字列を指定すると、ファイル名になります。
なので、ファイルフォームで画像が選択された時に、download属性にファイル名を設定しておきます。

$('input[type=file]').on('change', function(e){
  $('#download').attr('download', 'LGTM-' + e.target.files[0].name);
});

aタグをクリックした時に、canvasのdataURLをセットします。

$download = $('#download')
$download.on('click', function(){
  // マウス選択中の枠を消しておく
  canvas.deactivateAll().renderAll()
  // canvasのdataURLをセット
  $download.attr('href', canvas.getElement().toDataURL());
});

これでcanvasの内容をJavaScriptだけでダウンロードすることが出来るようになりました。

リポジトリ

https://github.com/ttakuru88/lgtm-maker

改造した

文章や文字色を変えられるようにしたバージョンです。

http://hai3.net/lgtm_maker/

お知らせ

053c751a-9a40-43e2-ad6e-b75e78367451

安全性に優れ、柔軟な権限設定が可能な情報共有サービス DocBase を本リリースしました。

DocBaseとは

DocBaseとは、成長する組織のための情報共有サービスです。
成長とともにメンバーが増加する中でも円滑に情報共有を行うことを可能にします。エンジニア以外のメンバーでも使いやすい仕組み、柔軟な権限設定によって従来の情報共有ツールで起こりがちだった心理的ハードルを下げ、積極的な情報共有と業務の効率化を実現します。

詳しくはこちらから。
https://kray.jp/news/docbase/

クレイについてもっと知りたい方は…

  1. クレイの3つの強みを見てみる。
  2. WEBシステムのことなら何でもご相談ください。

「いいね!」で応援よろしくお願いします!

このエントリーに対するコメント

コメントはまだありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


トラックバック

we use!!Ruby on RailsAmazon Web Services

このページの先頭へ