html5-canvas
イメージ

キャンバスを使用した画像の切り抜き

この例では、イメージとクロップ座標を取り、トリミングしたイメージを返す簡単なイメージクロッピング関数を示します。

function cropImage(image, croppingCoords) {
    var cc = croppingCoords;
    var workCan = document.createElement("canvas"); // create a canvas
    workCan.width = Math.floor(cc.width);  // set the canvas resolution to the cropped image size
    workCan.height = Math.floor(cc.height);
    var ctx = workCan.getContext("2d");    // get a 2D rendering interface
    ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // draw the image offset to place it correctly on the cropped region
    image.src = workCan.toDataURL();       // set the image source to the canvas as a data URL
    return image;
}

使用する

var image = new Image();
image.src = "image URL"; // load the image
image.onload = function () {  // when loaded
    cropImage(
        this, {
        x : this.width / 4,     // crop keeping the center
        y : this.height / 4,
        width : this.width / 2,
        height : this.height / 2,
    });
    document.body.appendChild(this);  // Add the image to the DOM
};

Tainedキャンバス

ドメイン外のソースやローカルファイルシステムからコンテンツを追加する場合、キャンバスは汚染されたものとしてマークされます。ピクセルデータにアクセスしようとするか、dataURLに変換しようとするとセキュリティエラーが発生します。

vr image = new Image();
image.src = "file://myLocalImage.png";
image.onload = function(){
    ctx.drawImage(this,0,0);
    ctx.getImageData(0,0,canvas.width,canvas.height);  // throws a security error
}

この例は、精巧な詳細な理解を持つ人を誘惑する単なるスタブです。

"context.drawImage"はキャンバス上にイメージを表示していませんか？

context.drawImageを使用してイメージオブジェクトをキャンバスに描画する前に、イメージオブジェクトが完全に読み込まれていることを確認してください。そうしないと、イメージが表示されなくなります。

JavaScriptでは、画像はすぐに読み込まれません。その代わりに、画像は非同期にロードされ、JavaScriptを読み込む時間中にimage.src続くコードの実行を続けます。つまり、 context.drawImageは空のイメージで実行されるため、何も表示されません。

.drawImageで画像を描画しようとする前に画像が完全に読み込まれていることを確認する例

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // start() is called AFTER the image is fully loaded regardless 
    //     of start's position in the code
}

複数のイメージをロードしてから描画する例

より多くのフル機能のイメージローダーがありますが、この例はそれを行う方法を示しています

// first image
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// second image
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// start is called every time an image loads
function start(){
    // countdown until all images are loaded
    if(--imgCount>0){return;}
    // All the images are now successfully loaded
    // context.drawImage will successfully draw each one
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}

画像をサイズまたはサイズに合わせて拡大または縮小します。

フィットするようにスケーリングする

イメージ全体が表示されることを意味しますが、イメージがキャンバスと同じでない場合は、サイドまたは上部と下部に空きスペースがあります。この例は、フィットするようにスケーリングされたイメージを示しています。側面の青色は、イメージがキャンバスと同じ面ではないという事実によるものです。

塗りつぶすためのスケーリング

すべてのキャンバスピクセルが画像で覆われるように画像が拡大縮小されることを意味します。画像のアスペクトがキャンバスと同じでない場合、画像の一部が切り取られます。この例では、塗りつぶされた画像が表示されます。イメージの上部と下部がどのように見えなくなっているかに注意してください。

フィットするスケールの例

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

塗りつぶす尺度の例

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

2つの機能の唯一の違いは、スケールを得ることです。フィットは最小フィッティングスケールを使用します。フィルは最大フィッティングスケールを使用します。