我使用jcrop为用户提供了一种通过ajax上传图像的友好方式。显然，这些图像有一些约束，如宽度和高度，这是jcrop发挥作用的地方。因此，为了简洁起见，我正在做的事情如下：
通过javascript文件选择输入文件api将图像加载到img标签中。 Jcrop使用此图像标记并将结果呈现到html画布上。
现在这是狡猾的部分。画布图像总是模糊的......
为了论证，画布设置为400x200，这是裁剪尺寸。
答案 0 :(得分：20)
如果通过CSS设置画布宽度和高度，则会导致图像模糊。为了解决这个问题，我必须通过html属性设置宽度和高度。现在我有一个很棒的裁剪解决方案，可以通过AJAX保存图像。清脆明确:)）
<canvas id="preview" width="400" height="200"></canvas>
答案 1 :(得分：3)
根据HTML Standard，如果缺少width或height属性，则必须使用默认值，宽度为300，高度为150。这两个属性将决定画布的宽度和高度，而css属性仅决定它将在其中显示的框的大小。
canvas元素有两个属性来控制元素位图的大小：width和height。指定时，这些属性必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值会返回错误，则必须使用默认值。 width属性默认为300，height属性默认为150。
canvas元素表示嵌入内容时的内在尺寸等于元素位图的尺寸。
用户代理必须使用由每个坐标空间单位的一个图像数据像素组成的方形像素密度，用于画布的位图及其渲染上下文。
画布元素可以通过样式表任意调整大小，然后其位图受“对象适合”CSS属性的约束。
您可以参考以下帖子了解更多详情： Canvas is stretched when using CSS but normal with "width" / "height" properties
答案 2 :(得分：1)
这实际上只是上述答案的延伸。我也遇到了使用Javascript / CSS变得模糊和模糊的CANVAS图像调整问题，因为我的应用程序首先使用HTML创建一些DIV，其中一个持有CANVAS控件，然后ONLOAD事件称为Javascript例程以获取屏幕尺寸，相应地优化所有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属性指定它的大小。