0

長方形と円で構成される視覚化用に持っている HTML5 キャンバス要素の高解像度スクリーンショットを撮ろうとしています。生成される画像が元のcanvas.toDataURL()キャンバスのサイズに制限されることを除いて、うまく機能します。私が本当にやりたいのは、元のキャンバスの 4 倍または 5 倍のスクリーンショットを撮ることです。

ただし、私の戦略は、次のような一時的なキャンバスを画面外に作成することです。

function renderScreenshot(canvas, scaleFactor) {
    var ctx = canvas.getContext('2d');
    var screenshotCanvas = document.createElement('canvas'); 
    var screenshotCtx = screenshotCanvas.getContext('2d');
    screenshotCanvas.width = canvas.width * scaleFactor; 
    screenshotCanvas.height = canvas.height * scaleFactor;
    screenshotCtx.drawImage(canvas, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor);
    return screenshotCanvas.toDataURL();
}

現在の問題は、スケーリングされた画像がぼやけてピクセル化されており、何の役にも立たないことです。これを回避する方法は何ですか？

4

1 に答える 1

2

残念ながら、ベクトル画像の場合と同じようにパスを描画できますが、パスが描画されるとラスタライズされ、補間なしではスケーリングできません。

代わりに、パス要素を適切にレンダリングするには、すべての座標に倍率を掛けて、すべてを完全に再描画する必要があります。

于 2013-07-29T07:41:11.713 に答える