Javascript 模糊画布图像

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

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

现在这是不可靠的部分。画布图像总是模糊的

---

为方便起见，画布设置为400x200，即裁剪尺寸。

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

---

这实际上只是上述答案的扩展。我也遇到了使用Javascript/CSS调整画布图像大小变得模糊和模糊的问题，因为我的应用程序首先使用HTML创建了几个div，其中一个拥有画布控件，然后是名为Javascript例程的ONLOAD事件来获取屏幕大小，相应地优化所有div和画布的大小和位置，最后在画布上画画。我这样做是因为我希望无论在什么设备上观看，画布都尽可能大

我的解决方案是使用Javascript动态绘制画布控件，也就是说，对于包含画布的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>";

var CanvasWidth=screen.availWidth-30；
var CanvasHeight=screen.availHeight-190；
//上面的30和90是任意数字，以允许页面上的其他div
var o=window.document.getElementById（“IdOfDivContainingCanvas”）；
o、 innerHTML=“”；

…使画布的大小有效地动态变化；在执行在画布上实际绘制的Javascript语句之前，使用HTML属性指定的大小创建。根据，如果缺少宽度或高度属性，则必须使用默认值，宽度为300，高度为150。这两个属性将决定画布的宽度和高度，而css属性仅决定将在其中显示画布的框的大小

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

canvas元素表示嵌入内容时的内在维度等于元素位图的维度

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

画布元素可以通过样式表任意调整大小，其位图则受“object fit”CSS属性的约束。

有关更多详细信息，请参阅以下帖子：

---

谢谢你的回答，这很有帮助，但我不明白它是怎么发生的。？你能解释一下吗？（仅供参考）嗨，普拉，tbh我不知道为什么css样式会导致整个内联参数模糊。当我有空闲时间的时候，我可能会研究这个问题。谢谢Ben，我也会研究这个问题&如果我得到答案，我会加上它顺便说一句，它的普拉。：）有人知道会发生什么吗@BenPretorius你让我开心，谢谢you@BenPretorius恐怕这只是解决办法的一部分。根据这一点，您的解决方案只能在标准分辨率显示器上清晰显示，或者在Safari的HD显示器上清晰显示，而不是在Chrome上。

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>";