0

a * a如何使用 HTML5 画布保存单个大小的图像，canvas.toDataURL()然后以不同的大小绘制它， a * a/2a * 2a而不会失真？

或者

我有一个 HTML5/JavaScript 网络应用程序。有一个项目目录，当我添加一个新项目时，我使用 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 * 100获取以 dataUrl 形式保存的图像（大小）。现在，我需要将相同的图像绘制到另一个大小400 * 400不失真的画布中。我该怎么做呢？

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 回答