canvasで画像をトリミングする

デモ：http://mo49.tokyo/qiita/20160504/trim.html

imgは読み込んだ後でないとwidth, heightがとれないので、img.onloadの中で描画する。
もしくはdomとしてあらかじめ用意。display:none;で消しておく。

trim.js

// トリミングしてcanvas要素に描画して返す関数
function trimImage (imgSrc) {

    var TRIM_SIZE = 300;
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = canvas.height = TRIM_SIZE;
    canvas.id = 'canvas-photo';

    var img = new Image();
    img.src = imgSrc + '?' + (new Date).getHours(); // IE対策

    // imgは読み込んだ後でないとwidth,heightが0
    img.onload = function() {
        // 横長か縦長かで場合分けして描画位置を調整
        var width, height, xOffset, yOffset;
        if (img.width > img.height) {
            height = TRIM_SIZE;
            width = img.width * (TRIM_SIZE / img.height);
            xOffset = -(width - TRIM_SIZE) / 2;
            yOffset = 0;
        } else {
            width = TRIM_SIZE;
            height = img.height * (TRIM_SIZE / img.width);
            yOffset = -(height - TRIM_SIZE) / 2;
            xOffset = 0;
        }
        ctx.drawImage(img, xOffset, yOffset, width, height);
    };

    return canvas;
}

// トリミングしたcanvasを追加
var imgSrc = './img/test.jpg';
$('body').append( trimImage(imgSrc) );

正方形に切り抜くのではなく、画像の比率を保ったまま縮小させる場合は以下のようにやる。

resize.js

img.onload = function() {
    //縦横の縮小率を求める    
    var ratioWidth = canvas.width / img.width;
    var ratioHeight = canvas.height / img.width;
    //縮小率の小さい方を使う
    if (ratioWidth <= ratioHeight) {
        var ratio = ratioWidth;
    } else {
        var ratio = ratioHeight;
    }

    //リサイズ後のピクセル数を計算（縦横に同じ比率をかける） 
    var sizeWidth = Math.round(img.width * ratio);
    var sizeHeight = Math.round(img.height * ratio);        
    //中央値を求める
    var drawX = Math.round((canvas.width - sizeWidth) / 2);
    var drawY = Math.round((canvas.height - sizeHeight) / 2);

    //写真をcanvasに表示する
    ctx.drawImage(img,drawX,drawY,sizeWidth,sizeHeight);
}

参考
drawImage() メソッド
canvasに画像を描画しよう（トリミングやクリッピングも）