HTML模糊画布图像 [英] HTML Blurry Canvas Images

问题描述

我使用jcrop为用户提供了一种通过ajax上传其图像的友好方式.显然，这些图像具有一些约束，例如宽度和高度，这是jcrop发挥作用的地方.因此，为了简洁起见，即时通讯功能如下:

I use jcrop to provide users with a friendly way of uploading their images via ajax. Obviously these images have some constraint like width and height which is where jcrop comes into play. So for the sake of brevity what im doing is as follows:

输入文件会将图像加载到img标签中. Jcrop与此图像标签一起使用，并将结果呈现到html canvas上.

input file select via javascript file api loads the image into a img tag. Jcrop works with this image tag and renders the result onto a html canvas.

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

Now this is the dodgy part. The canvas image is always blurry...

出于参数考虑，将画布设置为400x200，这是裁剪尺寸.

for arguments sake the canvas is set to 400x200 which is the crop size.

推荐答案

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

If the canvas width and height is set via CSS it results in a blurry image result. TO get around this I had to set the width and height via html attributes. Now I have a wonderful cropping solution that can save images via AJAX. Crisp and Clear:)

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

这篇关于HTML模糊画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！