ＳＱＬの窓
<< AsyncTask を継承し… | TOP | EASELJS を使用した… >>

2016年05月01日


EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します

 
当然ではありますが、ブラウザが画像をロードし終わらないと、JavaScript でサイズを知る事ができません。EASELJS の createjs.Bitmap の引数は、文字列の URL では無く Image オブジェクトを使用しています。

画像サイズが解ったら、そのサイズを使って計算し、scaleX と scaleY で縮小します。

トリミングは createjs.Rectangle で四角形を作成して、Bitmap の sourceRect プロパティに設定します。表示位置は、x プロパティと y プロパティで Stage の中の位置を設定します。

画像を角丸にする為、Shape オブジェクトで画像に合った角丸の形状を作成して、Bitmap の mask プロパティに設定します。



実際の画像 1200x900 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
if ( typeof createjs === 'undefined' ) {
	document.write("<"+"script src=\"https://code.createjs.com/easeljs-0.8.2.min.js\"></"+"script>");
}
</script>
<script>
$(function(){
	$("#tm_action").on("click", function(){

		// トリミング
		var rect = new createjs.Rectangle(700, 300, 200, 200);
		bitmap.sourceRect = rect;
		bitmap.x = 10;
		bitmap.y = 10;

		stage1.update();

	});

	$("#mask_action").on("click", function(){

		shape.graphics.drawRoundRect(10, 10, 200, 200, 16, 16);
		bitmap.mask = shape;

		stage1.update();
	});

	$("#clear_action").on("click", function(){

		bitmap.mask = null;
		stage1.clear();

	});

});
</script>
<input type="button" value="トリミング" id="tm_action">
<input type="button" value="角丸マスク" id="mask_action">
<input type="button" value="クリア" id="clear_action">
<br>
<canvas id="load_area1" width="400" height="220" style='border:1px solid #000000'></canvas><br><canvas id="load_area2" width="400" height="300" style='border:1px solid #000000'></canvas>
<script>
var stage1 = new createjs.Stage("load_area1");
var stage2 = new createjs.Stage("load_area2");
var bitmap,shape;

img = new Image()
img.onload = function() {

	// トリミング用 bitmap
	bitmap = new createjs.Bitmap(this);
	stage1.addChild(bitmap);

	// マスク用 shape
	shape = new createjs.Shape();

	var bitmap_all = new createjs.Bitmap(this);
	bitmap_all.scaleX = 400/bitmap_all.image.width;
	bitmap_all.scaleY = 300/bitmap_all.image.height;

	stage2.addChild(bitmap_all);
	stage2.update();

}
img.src = "https://lh3.googleusercontent.com/-A5QW2HTze84/VyNZEIwxh4I/AAAAAAAAeRE/-rCcFQmsKawDMRrV6logONKz0i6LVhtYACCo/s1200/wing_elf.jpg";



</script>

easeljs のロードは、ブログの記事に書き込む事を想定して、そのページで一度きりのロードです。
【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-05-01 19:06 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり