1

プロジェクトの場合、キャンバス (SAVE_CV と呼ばれる) のコンテンツを取得し、それを別の小さなキャンバスに表示したいと考えています。

これまでのところ、問題を引き起こしている可能性があることをいくつか認識しています。キャンバスのサイズを変更するとコンテンツがクリアされます。キャンバスの JS サイズは CSS サイズとは異なります。

小さい方のキャンバスの幅を 500px にして、適切な高さにしたいと思います。

function restoreTaggingCV() {
    var cv = document.getElementById( 'taggingCV' );
    var ctx = cv.getContext( "2d" );
    var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
    ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}

これはこれまでの私のコードです。小さいキャンバスのサイズを適切に変更しようとすると、何も入っていない空白のキャンバスしか表示されません。でサイズを設定しようとしまし"cv.height = X" and "cv.style.height = styleHeight + 'px'"たが、どちらも機能しませんでした。また、CSS を使用してキャンバスの幅を設定したいと思います。

どんな助けにも感謝します。

編集 後でユーザーが小さいバージョンの領域をマークしてから、大きなバージョンから個々のイメージを作成するために使用したいので、画像に画像が必要です。この領域をユーザーに視覚化したいと考えています。おそらく、画像を使用してその上に div を配置することでこれをすべて行うことができますが、HTML と CSS は初めてなので、キャンバスを使用することに自信が持てるようになりました。

4

2 に答える 2

1

CanvasRenderingContext2d.prototype.scaleメソッドを使用してみてください。キャンバスの倍率を設定し、倍率を乗じた寸法で現在の状態にあるものをすべてレンダリングします。

したがって、drawImage関数を使用する前に、コンテキストを適切にスケーリングします (この場合は縮小します)。例えば：

context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();

これにより、現在のサイズの 0.5 倍のコンテキストでキャンバスがレンダリングされます。このフィドルで、大きなキャンバスを小さな別のキャンバスにミラーリングするためにどのように使用したかを確認してください。

于 2013-09-02T14:57:55.493 に答える
0

Canvas オブジェクトはサイズ変更を好みません。画像を描画したら、それを DataURL() に変換し、画像ソースとして設定するだけです。必要に応じて画像のサイズを変更できます。

$img.attr('src',canvas.toDataURL());

于 2013-09-02T13:26:05.297 に答える