0

a * aHTML5キャンバスを使用してサイズの単一の画像を保存しcanvas.toDataURL()、後で異なるサイズで a * a/2a * 2a歪みなしで描画する方法は?

また

HTML5 / JavaScript Web アプリケーションがあります。新しいアイテムを追加するときに、HTML5 キャンバスを使用してアイテムの画像を追加するアイテム カタログがあります。

<canvas id="canvasnew" height="100" style="border:1px dotted" width="100"></canvas>

この100 * 100画像は変換さ$('#canvasnew')[0].toDataURL()れ、私のデータベースに保存されます。そして、画像は後で次のように別のキャンバスに描画されます。

var ctx = $(this.el).find('#canvas')[0].getContext('2d');
var img = new Image;
img.onload = function () {
    ctx.drawImage(img, 0, 0);
};
img.src = this.model.toJSON().ImageUrl;`

this.model.toJSON().ImageUrl100 * 100dataUrl 形式で保存された画像 (サイズ) を取得します。400 * 400ここで、この同じイメージを、歪みのないサイズのもう 1 つのキャンバスに描画する必要があります。どうすればいいですか？

4

1 に答える 1

0

これを試して：

ctx.drawImage(img, 0, 0, 400, 400);

drawImage最大 9 つのパラメーターを受け入れます。最初の 5 つは次のとおりです。

  1. 画像、
  2. x 位置、
  3. y 位置、
  4. 幅、
  5. 身長。

そう：drawImage(img, x, y, width, height);

ただし、そのような画像を引き伸ばすと、「新しい」ピクセルを計算/補間する必要があるため、常に何らかの歪みが生じます。一部の補間アルゴリズムは、他のアルゴリズムよりも効率的であったり、より優れたイメージを生成したりしますが、これまでのところ、canvasさまざまなアルゴリズムのサポートは限定的です。（詳細については、こちらをご覧ください）

于 2012-12-28T07:54:26.550 に答える