とにかくスケールアップされた2dコンテキストからdataurlを取得するには？

Question

ビューポートの幅に応じて幅が異なる&のキャンバスを持っています。キャンバスは、toDataURLを使用して最終的なpngを作成するために使用されます。しかし、私は固定解像度で最終的なPNGが必要です。ですから、私はキャンバスから2Dコンテキストをスケールアップする必要があります。しかし、そのスケールアップされたコンテキストからdataurlを取得する方法はありますか？私は2番目のキャンバスを使用するつもりはありません。

*究極の目標は、1つのキャンバスを保持することです（これにはスペースが限られています（たとえば、640x480 divコンテナ、必要なpngは1920x1080 resです）。描画されたキャンバスの拡大版がpngとして必要です

Answer 1

キャンバス要素自体のサイズを変更して、イメージの出力サイズを決定する必要があります。

canvas.width = finalWidth;   // pseudo variables 
canvas.height = finalHeight; 

ctx.drawImage(img, 0, 0, finalWidth, finalHeight); // draws image scaled to final size 
var dataUrl = canvas.toDataURL(); // png at given size 

特定のサイズの画像を取得する唯一の方法は、toDataURL()又はtoBlob()を使用するときに素子に大きさを設定することです。 getImageData()を使用すると、生データはスナップショットとしてのみ提供され、変換は無視されます。

要素を小さくする必要がある場合は、CSSを使用してサイズを設定する必要があります。

Answer 2

すべての要素はページ外の人生を持つことができます。作成することができ、必要に応じて使用し、GCを後でクリーンアップすることができます。

オフスクリーンキャンバスを使用して画像を拡大縮小する例です。

// Returns a new Image at size width, height 
function resizeImage(image, width, height){ 
    const canvas = document.createElement("canvas"); // create a canvas element 
    canvas.width = width; // set its width and height 
    canvas.height = height; 
    // Draw the image scaled onto it 
    canvas.getContext("2d").drawImage(image,0,0,width,height); 
    // Create a new image element 
    const scaledImage = new Image; 
    // Set its src to the canvas content 
    scaledImage.src = canvas.toDataURL(); // default mime type image/png 
    // Return the new scaled image. 
    return scaledImage; // note Image may no have loaded at this point 
    // The canvas is dereferences and will be cleaned up by GC very soon. 
    // nobody will ever know it existed ;| 
}