javascript - HTML 模糊画布图像

Question

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

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

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

出于参数考虑，画布设置为 400x200，即裁剪尺寸。

Answer 1

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

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

Answer 2

根据HTML 标准，如果缺少 width 或 height 属性，则必须使用默认值，即宽度为 300，高度为 150。这两个属性将决定画布的宽度和高度，而 css 属性仅决定将在其中显示的框的大小。

canvas 元素有两个属性来控制元素位图的大小：宽度和高度。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。width 属性默认为 300，height 属性默认为 150。

当画布元素表示嵌入内容时，其固有尺寸等于元素位图的尺寸。

对于画布的位图及其渲染上下文，用户代理必须使用由每个坐标空间单元的一个图像数据像素组成的正方形像素密度。

画布元素可以通过样式表任意调整大小，然后其位图受制于“object-fit”CSS 属性。

您可以参考以下帖子了解更多详细信息： Canvas 在使用 CSS 时被拉伸，但在“width”/“height”属性下正常

Answer 3

这实际上只是上述答案的延伸。我也遇到了使用 Javascript/CSS 调整大小的 CANVAS 图像变得模糊不清的问题，因为我的应用程序首先使用 HTML 创建了几个 DIV，其中一个包含 CANVAS 控件，然后调用 Javascript 例程的 ONLOAD 事件来获取屏幕大小，相应地优化所有DIV和CANVAS的大小和位置，最后绘制在CANVAS上。我这样做是因为我希望 CANVAS 在任何设备上都尽可能大。

我的解决方案是也使用 Javascript 来动态绘制 CANVAS 控件，即包含 CANVAS 的 DIV 只需包含...

var CanvasWidth=screen.availWidth-30;
var CanvasHeight=screen.availHeight-190;
//The 30 and 90 above are arbitrary figures to allow for other DIVS on the page
var o=window.document.getElementById("IdOfDivContainingCanvas");
o.innerHTML="<canvas id='myCanvas' width='"+CanvasWidth+"' height='+CanvasHeight+'></canvas>";

...因此 CANVAS 的大小实际上是动态的；在执行实际在 CANVAS 上绘制的 Javascript 语句之前，使用 HTML 属性指定其大小创建。