小さなキャンバスから高解像度の画像を取得するにはどうすればよいですか？

Question

私はWebアプリケーションで1つのキャンバスを使用しています。実際の高さと幅は500ピクセルです。私はこのキャンバスを500px四角形として画面に表示していますが、このキャンバスから1600px四角形にイメージをエクスポートします。私は運がないコードの下で試しました。

canvas.width = 1600; 
canvas.style.width = 500; 

助けてください。

Answer 1

キャンバスディスプレイは500pxで解像度は1600pxですが、表示サイズと解像度は独立しています。解決のために、キャンバスの幅と高さのプロパティを設定します。表示サイズについては、キャンバスをスタイルの幅と高さのプロパティに設定します。

// create a canvas or get it from the page 
var canvas = document.createElement("canvas"); 
// set the resolution (number of pixels) 
canvas.width = canvas.height = 1600; 
// set the display size 
canvas.style.width = canvas.style.height = "500px"; 
// get the rendering context 
var ctx = canvas.getContext("2d"); 

表示サイズに合わせてレンダリングするには、すべてのレンダリングを拡大する必要があります。あなたは、あなたが画面サイズの座標を使用してキャンバスにレンダリングしたときに表示サイズ今

var scale = 1600/500; // get the scale that matches display size 
ctx.setTransform(scale,0,0,scale,0,0); 

で割ったキャンバスの解像度に変換するスケールを設定することにより、これを行うことができます。

ctx.fillRect(0,0,500,500); // fill all of the canvas. 
ctx.fillStyle = "red"; // draw a red circle 100 display pixels in size. 
ctx.beginPath(); 
ctx.arc(250,250,100,0,Math.PI * 2); 
ctx.fill(); 

あなたはキャンバスを保存すると、限りそれは画面が保存されたキャンバスをキャプチャしていないとして、これまで何を使う方法は、1600年で1600年になり、すべての描画が正しく位置と比例

Answer 2

HTML

<canvas width="1600px" height="1600px" > </canvas> 

CSS

canvas{ 
    position :absolute; 
    transform:scale(0.3125); 
    left:-500px; //adjust 
    top:-350px; //adjust 
} 

使用すると、変換：スケールを（）今* 1600 1600キャンバスのサイズ

を調整しますので、あなたのキャンバスの実際のサイズになりますキャンバスから直接画像を書き出すことができます

しかし、表示では500px * 500pxのように表示されます縮小して縮小すると、エクスポート中に画質に影響しません

Answer 3

正直な答え：できません。

これを実行した場合、元のサイズの1/9未満のデータを無損失で圧縮することができ、エンコードすることも不可能ではありません。

できることは、少なくともぼやけないようにスケールアップすることです。これを行うには、最後のイメージを前のキャンバスの整数倍にする必要があるため、ブラウザはアンチエイリアスを適用しません。または、アンチエイリアシングを除去するputImageDataの独自のコピー式を使用する場合は、さまざまな不一致が発生し、非常に遅くなります

あなたの場合、最も近いのは1500x1500です3×500×3×500）。キャンバスを中心にしてbox-shadowなどのプロパティを使用するなど、さまざまなトリックに頼ることができます。画面の他の部分とは別の場所に表示されます