Отключить интерполяцию при масштабировании <холста>

Question

Отключить интерполяцию при масштабировании <холста>

ПРИМЕЧАНИЕ. Это связано с тем, как существующие элементы холста отображаются при увеличении масштаба, а не в делать с 9X_webpage тем, как линии или графика отображаются 9X_vanilla-javascript на поверхности холста. Другими словами, это все связано с интерполяцией масштабированных элементов и 9X_html5 не имеет ничего общего с сглаживанием графики, нарисованной 9X_.js на холсте. Меня не волнует, как браузер 9X_javascript-library рисует линии; Меня волнует, как браузер 9X_html-tag отображает элемент холста сам при его увеличении.

Есть 9X_html ли свойство холста или параметр браузера, который 9X_canvas я могу изменить программно, чтобы отключить 9X_html5 интерполяцию при масштабировании элементов 9X_divs

Z

Zondak

javascript

html

canvas

Комментарии:

В некоторой степени связано, но не идентично: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasin ...

Общее количество ответов: 5

Ответ #1

Ответ #2

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Новый ответ 31.07.2012

Это наконец-то в спецификации холста!

В спецификацию 9X_javascript-execution недавно добавлено свойство imageSmoothingEnabled, которое по 9X_vanilla-javascript умолчанию имеет значение true и определяет, будут 9X_.js ли изображения, нарисованные в нецелочисленных 9X_html-tag координатах или нарисованные с масштабированием, использовать 9X_divs более плавный алгоритм. Если для него установлено 9X_html-tag значение false, то используется ближайший сосед, создавая 9X_javascript-library менее гладкое изображение и вместо этого 9X_webpage просто делая пиксели большего размера.

Сглаживание 9X_ecmascript изображений было добавлено в спецификацию 9X_html-tag холста совсем недавно и поддерживается не 9X_html всеми браузерами, но в некоторых браузерах 9X_javascript-library реализованы версии этого свойства с префиксом 9X_javascript-library поставщика. В контексте существует mozImageSmoothingEnabled в Firefox 9X_vanillajs и webkitImageSmoothingEnabled в Chrome и Safari, и установка для них 9X_html-tag значения false остановит сглаживание. К 9X_ecmascript сожалению, на момент написания IE9 и Opera 9X_div не реализовали это свойство, с префиксом 9X_javascript-execution поставщика или иным образом.

Предварительный 9X_div-layouts просмотр: JSFiddle

Результат:

9X_Отключить интерполяцию при масштабировании <холста>_.js

y

yaroslavsky

Ссылка на ответ №2

Комментарии:

Если вы масштабируете с помощью CSS, решение namuol будет работать. Если вы вручную масштабируете изображение на холсте, решение Саймона работает. Приятно, что ес ...

Ответ #3

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Изменить 31.07.2012 - теперь эта функция включена в спецификацию холста! См. Отдельный ответ здесь:

https://stackoverflow.com/a/11751817/154112

Старый ответ ниже для потомков.

В зависимости 9X_vanillajs от желаемого эффекта у вас есть один вариант:

var can = document.getElementById('b'); var ctx = can.getContext('2d'); ctx.scale(5,5); $('canvas').each(function () { var ctx = this.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(21,21); ctx.moveTo(0,21); ctx.lineTo(21,0); ctx.stroke(); });

http://jsfiddle.net/wa95p/

Что 9X_vanilla-javascript создает это:

9X_Отключить интерполяцию при масштабировании <холста>_vanillajs

Наверное, не то, что вам нужно. Но 9X_webpage если бы вы просто хотели добиться нулевого 9X_html размытия, то это было бы правильным решением, поэтому 9X_javascript-library я предлагаю его на всякий случай.

Более сложный 9X_javascript вариант - использовать манипуляции с пикселями 9X_span и самостоятельно написать алгоритм для работы. Каждый 9X_vanillajs пиксель первого изображения становится блоком 9X_vanillajs пикселей 5x5 на новом изображении. Сделать 9X_vanillajs это с изображениями несложно.

Но сами по 9X_divs себе Canvas и CSS не помогут вам в масштабировании 9X_div-layouts друг друга с тем эффектом, который вам нужен.

M

MpXXXEnergy

Ссылка на ответ №3

Ответ #4

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

В Google Chrome шаблоны изображений холста 9X_webpage не интерполируются.

Вот рабочий пример, отредактированный 9X_ecmascript из ответа намуола http://jsfiddle.net/pGs4f/

ctx.scale(4, 4); ctx.fillStyle = ctx.createPattern(image, 'repeat'); ctx.fillRect(0, 0, 64, 64);

A

AziaTT

Ссылка на ответ №4

Комментарии:

В качестве примечания, вот хороший тест по шаблонам и изображениям: http://jsperf.com/drawimage-vs-canvasp ...

Ответ #5

Ответ на вопрос: Отключить интерполяцию при масштабировании <холста>

Saviski's workaround Explicated here многообещающе, потому что он 9X_javascript-execution работает на:

Chrome 22.0.1229.79 Mac OS X 10.6.8
Chrome 22.0.1229.79 m Windows 7
Chromium 18.0.1025.168 (сборка разработчика 134367 Linux) Ubuntu 11.10
Firefox 3.6.25 Windows 7

Но не работает в следующих случаях, но 9X_webpage того же эффекта можно добиться с помощью 9X_html5 рендеринга изображений CSS:

Firefox 15.0.1 Mac OS X 10.6.8 (рендеринг изображений: -moz-crisp-Edge работает в this)
Opera 12.02 Mac OS X 10.6.8 (рендеринг изображения: -o-crisp-Edge работает в this)
Opera 12.02 Windows 7 (рендеринг изображений: -o-crisp-Edge работает в this)

Проблема заключается 9X_canvas в следующем, потому что ctx.XXXImageSmoothingEnabled 9X_js не работает и рендеринг изображений не работает:

Safari 5.1.7 Mac OS X 10.6.8. (рендеринг изображений: -webkit-optimize-Contrast НЕ работает)
Safari 5.1.7 Windows 7 (рендеринг изображений: -webkit-optimize-Contrast НЕ работает)
IE 9 Windows 7 (-ms-interpolation-mode: ближайший сосед НЕ работает)

c

ceyrana

Ссылка на ответ №5

h hamzat · Accepted Answer · 2023-02-08

Последнее обновление: 12 сентября 2014 г.

Есть ли свойство холста или параметр браузера, который 9X_html5 я могу изменить программно, чтобы отключить 9X_vanillajs интерполяцию при масштабировании элементов?

Ответ: может быть, когда-нибудь. А 9X_span пока вам придется прибегнуть к хитростям, чтобы 9X_vanilla-javascript получить то, что вы хотите.

`image-rendering`

The working draft of CSS3 outlines a new property, image-rendering, который должен 9X_javascript-execution делать то, что я хочу:

Свойство рендеринга 9X_div изображения дает подсказку пользовательскому 9X_js агенту о том, какие аспекты изображения 9X_javascript наиболее важно сохранить при масштабировании 9X_span изображения, чтобы помочь пользовательскому 9X_js агенту выбрать подходящий алгоритм масштабирования.

В 9X_html-tag спецификации указаны три допустимых значения: auto, crisp-edges и 9X_html pixelated.

пиксельный:

При увеличении масштаба изображения необходимо 9X_webpage использовать алгоритм «ближайшего соседа» или 9X_.js аналогичный, чтобы изображение выглядело 9X_html-tag просто состоящим из очень больших пикселей. При 9X_vanilla-javascript уменьшении аналогично авто.

Стандарт? Кроссбраузерность?

Поскольку это 9X_html5 всего лишь рабочий проект, нет никаких гарантий, что он 9X_canvas станет стандартом. Браузерная поддержка 9X_javascript-library пока в лучшем случае нечеткая.

В сети разработчиков 9X_html-tag Mozilla есть a pretty thorough page dedicated to the current state of the art, который я настоятельно рекомендую 9X_vanilla-javascript прочитать.

Разработчики Webkit изначально 9X_span выбрали tentatively implement this as -webkit-optimize-contrast, но Chromium / Chrome, похоже, не 9X_vanilla-javascript используют версию Webkit, которая это реализует.

Обновление: 12 сентября 2014 г.

Chrome 38 now supports image-rendering: pixelated!

В 9X_ecmascript Firefox есть bug report, открытый для реализации image-rendering: pixelated, но 9X_.js -moz-crisp-edges пока работает.

Решение?

Самым кроссплатформенным 9X_javascript решением, использующим только CSS, на данный 9X_div момент является:

canvas { image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: pixelated; /* Awesome future-browsers */ -ms-interpolation-mode: nearest-neighbor; /* IE */ }

К сожалению, это пока не 9X_vanilla-javascript работает на всех основных платформах HTML5 9X_html-tag (в частности, в Chrome).

Конечно, можно вручную 9X_javascript-library масштабировать изображения с помощью интерполяции 9X_javascript-execution ближайшего соседа на поверхности холста 9X_javascript-library с высоким разрешением в javascript или даже 9X_js предварительно масштабировать изображения 9X_div-layouts на стороне сервера, но в моем случае это 9X_html-tag будет слишком дорого, поэтому это не жизнеспособный 9X_vanilla-javascript вариант.

ImpactJS использует технику предварительного 9X_js масштабирования текстуры, чтобы обойти весь 9X_div этот FUD. Разработчик Impact, Доминик Саблевски, wrote a very in-depth article about this (в 9X_ecmascript конечном итоге он даже процитировал этот 9X_html-tag вопрос в своем исследовании).

См. Simon's answer для решения 9X_ecmascript на основе холста, которое полагается на 9X_js свойство imageSmoothingEnabled (недоступно в старых браузерах, но 9X_div проще, чем предварительное масштабирование, и 9X_javascript-library поддерживается довольно широко).

Живая демонстрация

Если вы 9X_javascript хотите протестировать свойства CSS, описанные 9X_javascript в статье MDN для элементов canvas, я сделал this fiddle, который 9X_.js должен отображать что-то вроде этого, размыто 9X_span или нет, в зависимости от вашего браузера: 9X_Отключить интерполяцию при масштабировании <холста>_js