Question

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

OR

我有一个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().ImageUrl获取以dataUrl形式保存的图片（尺寸100 * 100）。现在，我需要将相同的图像绘制成另一个大小为400 * 400的画布而不会失真。我该怎么做？

Answer 1

试试这个：

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

drawImage最多接受9个参数the first 5 being：

图片，
x位置，
y位置，
宽度，
高度。

所以：drawImage(img, x, y, width, height);

然而，由于必须计算/插值“新”像素，因此拉伸这样的图像总是会导致某种失真。一些插值算法比其他算法更有效，或者产生更好的图像，但到目前为止canvas对不同算法的支持有限。（Take a look here for some more information）

如何在HTML5画布，canvas.toDataURL（）中保存大小为a * a的图像，然后以不同的大小绘制它，a * a / 2a * 2a？

1 个答案: