スタートページ＞ Javascript＞ CANVAS

画像ファイルのＣＡＮＶＡＳ表示

ＵＲＬで指定した画像ファイルをcanvasに表示します。
ここで扱う画像ファイルは、
　　　"image/400x300.jpg", "image/120x80.jpg", "image/480x640.jpg"
です。ファイル名の数字は、横幅x縦高のピクセル値です。

なお、canvasを右クリックすることにより、canvasに表示されている画像を取り出せます。
取り出した画像のサイズはcanvasのサイズであり、読み込んだ元の画像とは異なります。

ローカル画像ファイルを対象にするときは、「ローカル画像ファイルのＣＡＮＶＡＳ表示」を参照してください。

１　canvasサイズが固定のとき

function 関数１(ファイル名, ＣＡＮＶＡＳ名) {
    // canvasの定義
    var canvas = document.getElementById(ＣＡＮＶＡＳ名);
    var ctx = canvas.getContext('2d');

    // canvasのサイズを得る　灰色の部分は本質的ではありません
    var canvas幅 = canvas.width;          // canvasに前の画像が残っているのを消すだけです。
    var canvas高 = canvas.height;
    // canvas全体をgrayにする
    ctx.fillStyle = 'gray';
    ctx.fillRect(0, 0, canvas幅, canvas高);

    // 画像の定義　　　　赤の部分が画像ファイル読込の常套手段です
    var 画像 = new Image();                // 画像ファイルの画像オブジェクトが生成
    // 画像を canvas1 に表示
    画像.onload = function() {             // 画像ファイルが読み込まれたときの処理
        ctx.drawImage(画像, 0, 0);         // ここに上の「canvasの定義」を入れてもかまいません
    }
    画像.src = ファイル名;                 // 画像ファイルの読込
}

ケース１関数１('image/400x300.jpg', 'canvas1'); 画像の大きさ＝canvasの大きさ
ケース２関数１('image/120x80.jpg', 'canvas1'); 画像の大きさ＜canvasの大きさ　無駄なスペースが発生
ケース３関数１('image/480x640.jpg', 'canvas1'); 画像の大きさ＞canvasの大きさ　画像の一部（左上）だけが表示

この下に<canvas id="canvas1" width="400" height="300"></canvas>があります。

２　画像に合わせてcanvasサイズを変える

function 関数２(ファイル名, ＣＡＮＶＡＳ名) {
    var 画像 = new Image();
    画像.onload = function() {     // 画像ファイル読込後の処理
        // 画像サイズ取得
        var 画像幅 = 画像.width;
        var 画像高 = 画像.height;
        // canvasの定義
        var canvas = document.getElementById(ＣＡＮＶＡＳ名);
        var ctx = canvas.getContext('2d');
        canvas.width = 画像幅;     // 画像ファイルの横幅がcanvasの横幅になります
        canvas.height = 画像高;
        // 画像を canvas に表示
        ctx.drawImage(画像, 0, 0);
    }
    画像.src = ファイル名;
}

ケース１関数２('image/400x300.jpg', 'canvas2'); canvasのサイズが大きくなる
ケース２関数２('image/120x80.jpg', 'canvas2'); canvasのサイズが小さくなる

この下に<canvas id="canvas1"></canvas>があります（サイズ指定はしていません。ブラウザでの標準サイズになります）。

３　画像をcanvasサイズに縮小して表示する

あらかじめcanvasのサイズを決めておき、画像ファイルの縦横比を固定して、canvasの中に納まるように圧縮（あるいは拡大）します。canvasの縦横比に比べて画像ファイルが横長のときは下、縦長のときは右に空白が生じます。

function 関数３(ファイル名, ＣＡＮＶＡＳ名) {
    var 画像 = new Image();
    画像.onload = function() {
        // 画像サイズ取得
        var 画像幅 = 画像.width;
        var 画像高 = 画像.height;
        // canvasの定義
        var canvas = document.getElementById(ＣＡＮＶＡＳ名);
        var ctx = canvas.getContext('2d');
                                          // 「関数２」に赤の部分を追加します。
        // 画像の圧縮
        var canvas幅 = canvas.width;
        var canvas高 = canvas.height;
        var canvas縦横比 = canvas高 / canvas幅;
        var 縦横比 = 画像高 / 画像幅;  // 縦横比≦canvas縦横比→横長→canvasの横幅がネックに
        if (縦横比 <= canvas縦横比) {   // 横長のとき
            var 圧縮後画像幅 = canvas幅;
            var 圧縮率 = canvas幅 / 画像幅;
            var 圧縮後画像高 = 圧縮率 * 画像高;
        }
        else {               // 縦長のとき
            圧縮後画像高 = canvas高;
            圧縮率 = canvas高 / 画像高;
            圧縮後画像幅 = 圧縮率 * 画像幅;
        }
        // canvas全体をgrayにする
        ctx.fillStyle = 'gray';
        ctx.fillRect(0, 0, canvas幅, canvas高);
        // 画像を canvas に表示
        ctx.drawImage(画像, 0, 0, 圧縮後画像幅, 圧縮後画像高);   // これにより圧縮した画像が表示されます
    }
    画像.src = ファイル名;
}

ケース１関数３('image/400x300.jpg', 'canvas3'); 横長画像：圧縮された全体が表示され、下に空白ができる
ケース２関数３('image/120x80.jpg', 'canvas3'); 横長画像：拡大された全体が表示（ぼやける）され、下に空白ができる
ケース３関数３('image/480x640.jpg', 'canvas3'); 縦長画像：圧縮された全体が表示され、右に空白ができる

この下に<canvas id="canvas3" width="300" height="300"></canvas>があります。

４　画像をcanvasサイズに縮小して、指定した位置に表示する

「３」の関数３では、画像を左上に寄せていましたが、左・中・右、上・中・下に表示指定をします。
ctx.drawImageのパラメタ指定で実現できます。「３」との違いは赤字の部分だけです。

function 関数４(ファイル名, ＣＡＮＶＡＳ名, 横位置, 縦位置) {
    var 画像 = new Image();
    画像.onload = function() {
        // 画像サイズ取得
        var 画像幅 = 画像.width;
        var 画像高 = 画像.height;
        // canvasの定義
        var canvas = document.getElementById(ＣＡＮＶＡＳ名);
        var ctx = canvas.getContext('2d');
        // 画像の圧縮
        var canvas幅 = canvas.width;
        var canvas高 = canvas.height;
        var canvas縦横比 = canvas高 / canvas幅;
        var 縦横比 = 画像高 / 画像幅;
        if (縦横比 <= canvas縦横比) {
            var 圧縮後画像幅 = canvas幅;
            var 圧縮率 = canvas幅 / 画像幅;
            var 圧縮後画像高 = 圧縮率 * 画像高;
            var 余白高 = canvas高 - 圧縮後画像高;
        }
        else {
            圧縮後画像高 = canvas高;
            圧縮率 = canvas高 / 画像高;
            圧縮後画像幅 = 圧縮率 * 画像幅;
            var 余白幅 = canvas幅 - 圧縮後画像幅;
        }
        // canvas全体をgrayにする
        ctx.fillStyle = 'gray';
        ctx.fillRect(0, 0, canvas幅, canvas高);
        // 画像を canvas に表示
        if (縦横比 <= canvas縦横比) {
            if (縦位置 == "上") {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,  0,        0, canvas幅, 圧縮後画像高);
            }
            else if (縦位置 == "下") {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,  0,   余白高, canvas幅, 圧縮後画像高);
            }
            else {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,  0, 余白高/2, canvas幅, 圧縮後画像高);
            }
        }
        else {
            if (横位置 == "左") {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,         0, 0, 圧縮後画像幅, canvas高);
            }
            else if (横位置 == "右") {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,    余白幅, 0, 圧縮後画像幅, canvas高);
            }
            else {
                ctx.drawImage(画像, 0, 0, 画像幅, 画像高,  余白幅/2, 0, 圧縮後画像幅, canvas高);
            }
        }
    }
    画像.src = ファイル名;
}

ケース１関数４('image/400x300.jpg', 'canvas4', '右', '下');
横長画像：圧縮された全体が下に表示され、上に空白ができる（'右'は無視される)
ケース２関数４('image/120x80.jpg', 'canvas4', '右', '中');
横長画像：拡大された全体が中央に表示され、上下に空白ができる（'右'は無視される)
ケース３関数４('image/480x640.jpg', 'canvas4', '右', '上');
縦長画像：圧縮された全体が右に表示され、左に空白ができる（'上'は無視される)

この下に<canvas id="canvas3" width="300" height="300"></canvas>があります。