Ben*_*ius 5 javascript jquery html5 asp.net-mvc-4
我使用jcrop为用户提供了一种通过ajax上传图像的友好方式.显然,这些图像有一些约束,如宽度和高度,这是jcrop发挥作用的地方.所以为了简洁起见,我在做的事情如下:
通过javascript文件选择输入文件api将图像加载到img标记中.Jcrop使用此图像标记并将结果呈现到html画布上.
现在这是狡猾的部分.画布图像总是模糊的......
为了论证,画布设置为400x200,这是裁剪尺寸.
Ben*_*ius 21
如果通过CSS设置画布宽度和高度,则会导致图像模糊.为了解决这个问题,我必须通过html属性设置宽度和高度.现在我有一个很棒的裁剪解决方案,可以通过AJAX保存图像.清脆明了:)
<canvas id="preview" width="400" height="200"></canvas>
根据HTML 标准，如果缺少 width 或 height 属性，则必须使用默认值，即宽度为 300，高度为 150。这两个属性将确定画布的宽度和高度，而 css 属性仅确定其显示框的大小。
canvas 元素有两个属性来控制元素位图的大小：宽度和高度。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者解析其值返回错误，则必须使用默认值。width 属性默认为 300，height 属性默认为 150。
当画布元素表示嵌入内容时，其固有尺寸等于元素位图的尺寸。
用户代理必须使用方形像素密度，该密度由每个坐标空间单位的一个图像数据像素组成，用于画布的位图及其渲染上下文。
画布元素可以通过样式表任意调整大小，然后其位图受“object-fit”CSS 属性的约束。
您可以参考以下帖子了解更多详细信息： Canvas is stretchwhen using CSS but Normal with "width" / "height"properties
| 归档时间： |
|
| 查看次数： |
7767 次 |
| 最近记录： |