我使用 jcrop 为用户提供一种通过 ajax 上传图像的友好方式。显然，这些图像有一些限制，比如宽度和高度，这就是 jcrop 发挥作用的地方。因此，为了简洁起见，我正在做的事情如下：
通过javascript文件api选择输入文件将图像加载到img标签中。 Jcrop 使用此图像标签并将结果呈现到 html 画布上。
现在这是狡猾的部分。画布图像总是模糊...
出于参数考虑，画布设置为 400x200，即裁剪尺寸。
【问题讨论】：
标签： javascript jquery html asp.net-mvc-4
如果通过 CSS 设置画布宽度和高度，则会导致图像模糊。为了解决这个问题，我必须通过 html 属性设置宽度和高度。现在我有了一个很棒的裁剪解决方案，可以通过 AJAX 保存图像。清晰明了:)
<canvas id="preview" width="400" height="200"></canvas>
【讨论】：
这实际上只是上述答案的延伸。我也遇到了使用 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 的大小实际上是动态的；使用 HTML 属性指定的大小创建，就在执行实际在 CANVAS 上绘制的 Javascript 语句之前。
【讨论】：
根据HTML Standard，如果缺少宽度或高度属性，则必须使用默认值，即宽度为300，高度为150。而这两个属性将决定画布的宽度和高度，而 css 属性仅决定了将要显示的框的大小。
canvas 元素有两个属性来控制元素位图的大小：宽度和高度。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。
canvas 元素在表示嵌入内容时的固有尺寸等于元素位图的尺寸。
对于画布的位图及其渲染上下文，用户代理必须使用由每个坐标空间单位一个像素的图像数据组成的正方形像素密度。
canvas 元素可以通过样式表任意调整大小，其位图随后受制于“object-fit”CSS 属性。
您可以参考以下帖子了解更多详情： Canvas is stretched when using CSS but normal with "width" / "height" properties
【讨论】：