takuru
Fabric.jsという、HTML5のcanvasに使うライブラリがあります。
これは、canvas上にマウスドラッグや拡大縮小、回転などを行えるオブジェクトを描画することができるライブラリです。
Fabric.jsを使用して、画像にLGTMという文字を貼り付けるツールを作ってみました。
デモ
このツールを使うことにより、こんな画像が
こんな風になります。
クールですね。
作り方
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
改造した
文章や文字色を変えられるようにしたバージョンです。
お知らせ
安全性に優れ、柔軟な権限設定が可能な情報共有サービス DocBase を本リリースしました。
DocBaseとは
DocBaseとは、成長する組織のための情報共有サービスです。
成長とともにメンバーが増加する中でも円滑に情報共有を行うことを可能にします。エンジニア以外のメンバーでも使いやすい仕組み、柔軟な権限設定によって従来の情報共有ツールで起こりがちだった心理的ハードルを下げ、積極的な情報共有と業務の効率化を実現します。
詳しくはこちらから。
https://kray.jp/news/docbase/
このエントリーに対するコメント
日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）
- トラックバック
最近の記事
人気の記事
「いいね!」で応援よろしくお願いします！