HTML Blurry Canvas Images

Question

Я использую jcrop, чтобы предоставить пользователям удобный способ загрузки изображений через ajax. Очевидно, что эти изображения имеют некоторую ограниченность, такую ​​как ширина и высота, в которой jcrop входит в игру. Поэтому для краткости, что делает im, выглядит следующим образом:

входной файл выбор через файл javascript api загружает изображение в тег img. Jcrop работает с этим тегом изображения и отображает результат на холст html.

Теперь это изворотливая часть. Изображение холста всегда размыто ...

для аргументов ради холста установлено значение 400x200, которое является размером обрезки.

Answer 1

Если ширина и высота холста заданы с помощью CSS, это приводит к размытому результату изображения. Чтобы обойти это, мне пришлось установить ширину и высоту с помощью атрибутов html. Теперь у меня есть замечательное решение для обрезки, которое может сохранять изображения через AJAX. Crisp and Clear :)

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

Answer 2

Это на самом деле просто продолжение ответа выше. Я также столкнулся с проблемой изменения изображений CANVAS с использованием Javascript/CSS, который стал нечетким и размытым, потому что мое приложение сначала использовало HTML для создания нескольких DIV, один из которых содержал элемент управления CANVAS, а затем событие ONLOAD, называемое подпрограммой Javascript, чтобы получить экран размер, оптимизируйте размеры и позиции всех DIV и CANVAS соответственно и, наконец, нарисуйте CANVAS. Я сделал это таким образом, так как хотел, чтобы CANVAS всегда был настолько большим, насколько возможно для любого устройства, на котором он был просмотрен.

Мое решение заключается в использовании 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>"; 

... так что размер CANVAS эффективно динамический; Созданный с его размером, указанным с использованием атрибутов HTML, непосредственно перед выполнением операторов Javascript, которые фактически используют CANVAS.

Answer 3

В соответствии с HTML Standard, если атрибут ширины или высоты отсутствует, вместо этого следует использовать значение по умолчанию, которое равно 300 для ширины и 150 для высоты. И эти два атрибута будут определять ширину и высоту холста, а свойства css просто определяют размер окна, в котором он будет показан.

Элемент canvas имеет два атрибута для управления размером растрового изображения элемента: шириной и высотой. Эти атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами. Правила для анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или разбор его значения возвращает ошибку, вместо этого следует использовать значение по умолчанию. Атрибут width по умолчанию равен 300, а атрибут height по умолчанию равен 150.

Внутренние размеры элемента холста, когда он представляет встроенный контент, равны размерам растрового изображения элемента.

Пользовательский агент должен использовать плотность квадратного пикселя, состоящую из одного пикселя данных изображения на единицу координатного пространства для растровых изображений холста и его контекстов рендеринга.

Элемент холста может быть произвольно отнесен к таблице стилей, тогда его растровое изображение будет обладать свойством CSS с привязкой к объекту.

Вы можете обратиться к следующему сообщению для более подробной информации: Canvas is stretched when using CSS but normal with "width"/"height" properties