画像を画面に合わせて拡大縮小したりトリミングする

画面サイズとか画面の縦横比に合わせた画像ファイル用意するのめんどくさいからJavaScriptで動的に用意する！

以下の関数で、指定した幅と高さに合わせつつ、元画像の真ん中部分を使うように拡大・縮小及びトリミングをします。EaselJSを使っているので事前に読み込んでおいてください。

function adaptImage(image, width, height) {
    // 作業場所としてのCanvasを作成
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var workspace = new Stage(canvas);
    var bitmap = new Bitmap(image);

    // フィットさせたいコンテナ（？）と、画像の「横長ぐあい」を計算
    var aspectRatio = width / height;
    var imageAspectRatio = image.width / image.height;
    if (imageAspectRatio < aspectRatio) {
        // コンテナの方が、より横長
        // だから、幅をフィットさせる。画像の上下にはみ出す部分を落とすことになる
        var scale = width / image.width;
    } else {
        // 画像の方が、より横長
        // だから、高さをフィットさせる。画像の左右にはみ出す部分を落とすことになる
        var scale = height / image.height;
    }
    bitmap.scaleX = bitmap.scaleY = scale;

    // デフォルトでは、画像は左上を合わせて、右下部分がトリミングされるので、
    // 位置をずらして「作業場所Canvas」と中心を揃えるように移動させる
    bitmap.x = (canvas.width - bitmap.scaleX * image.width) / 2;
    bitmap.y = (canvas.height - bitmap.scaleY * image.height) / 2;

    // 作業場所Canvasに実際にレンダリングする
    workspace.addChild(bitmap);
    workspace.update();

    // 画像を作って返す
    var adaptedImage = new Image();
    adaptedImage.src = canvas.toDataURL();
    return adaptedImage;
}
var image = new Image();
image.addEventListener("load", function(event) {
    var adaptedImage = adaptImage(event.target, window.innerWidth, window.innerHeight);
    // 画像を何かする。背景としてCSSで設定するとか。
});
image.src = "http://...";

StageとかBitmapとかはEaselJSのクラスで、EaselJSを読み込む前にvar createjs = this;しているので修飾無しで使えています。そうではない場合は、createjs.Stageのようにして使ってください。