web-dev-qa-db-ja.com

HTML5キャンバスputImageDataスケールを変更する方法

Scale（1.5、1.5）が機能しない状態でputImageDataスケールを変更する方法。

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.scale(1.5, 1.5);
context.putImageData(imageData, 0, 0);
scaleputimagedata
15
user3778390

正解です。コードは既存の図面を拡大縮小しません。

context.scaleは新しい図面にのみ影響し、既存の図面には影響しません。

context.putImageDataは、保存された元のピクセルをキャンバスに戻しますが、putImageDataは描画コマンドではないため、結果はスケーリングされません。

既存のピクセルを拡大縮小するには、キャンバスの外側のエンティティにピクセルを保存する必要があります。外部エンティティは、新しいImage要素または2番目のCanvas要素である可能性があります。

サンプルコードとデモ： http://jsfiddle.net/m1erickson/p5nEE/

// canvas related variables
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

// draw a test square
context.fillStyle="red";
context.fillRect(0,0,50,50);

// create an image from the canvas
// clear & scale the canvas
// draw the image to the canvas
var imageObject=new Image();
imageObject.onload=function(){

    context.clearRect(0,0,canvas.width,canvas.height);
    context.scale(1.2,1.2);
    context.drawImage(imageObject,0,0);

}
imageObject.src=canvas.toDataURL();
16
markE