javascript - HTML 模糊 Canvas 图像

Question

我使用 jcrop 为用户提供一种通过 ajax 上传图片的友好方式。显然，这些图像有一些限制，如宽度和高度，这就是 jcrop 发挥作用的地方。因此，为了简洁起见，我所做的如下:

通过 javascript 文件 api 的输入文件选择将图像加载到 img 标签中。 Jcrop 使用此图像标签并将结果呈现到 html Canvas 上。

现在这是狡猾的部分。 Canvas 图像总是模糊...

为了参数的缘故， Canvas 设置为 400x200，这是裁剪尺寸。

Answer 1

如果 Canvas 的宽度和高度是通过 CSS 设置的，则会导致图像模糊。为了解决这个问题，我必须通过 html 属性设置宽度和高度。现在我有了一个很棒的裁剪解决方案，可以通过 AJAX 保存图像。清晰明了:)

<canvas id="preview" width="400" height="200"></canvas>