5

最近、キャンバスよりも大きい画像をトリミングせずにキャンバスに描画し、いくつかの変更を行った後、画像を元のサイズに保存する方法について質問しました。解決策は、キャンバスのインラインheightとwidth属性を画像よりも大きく設定し、cssheightとwidthプロパティを使用してレイアウトに合わせてキャンバスのスタイルを設定することです。

たとえば、私の画像のサイズが400ピクセルから2000ピクセルの範囲であると仮定します。しかし、私はキャンバスをそれほど大きくしたくありませんし、画像もトリミングしたくありません（toDataURLキャンバス上にあるものと一緒に画像を保存すると、保存されるものになるためです）。これが機能するものです：

//style
#mycanvas{
    width: 400px;
    height: 400px;
}

<canvas id="mycanvas" width="2000" height="2000" />

これはうまく機能し、私の画像はうまく出てきます。しかし、この動作はバグがあり、将来変更/修正される可能性がありますか？このソリューションを当面のタスクに使用することを計画しています。

何かガイダンスはありますか？

4

2 に答える 2

6

この動作は、キャンバスのサイズを制御するために一般的に使用されます。

  • 解決のための属性
  • 伸縮用のCSS

HTML5のキャンバスの幅と高さを参照してください。

于 2012-12-09T09:00:41.483 に答える
0

質問されてから久しぶりですが、別の解決策もあります。

canvasContext.drawImage（）関数を使用して 、画像をキャンバスに描画するときに画像のサイズを変更してみてください。

構文：void ctx.drawImage(image, dx, dy, dWidth, dHeight);

  • dxとdyは、宛先キャンバスのx座標とy座標です
  • dWidthとdHeightは、画像がキャンバスに描画される寸法です。

（キャンバスと画像のサイズがわかっている場合は、これらの値が何である必要があるかを計算できます）

于 2019-03-11T08:25:23.237 に答える