Pixelated кросс-браузерное масштабирование изображений

Question

Я хотел бы увеличить изображение с масштабом = 2,0. Я хотел бы сделать для этого без какого-либо сглаживания, поэтому желаемый эффект состоит в том, чтобы превратить каждый пиксель исходного изображения в 2x2 пикселя того же цвета.

Интересно, возможно ли это сделать в Javascript / CSS в кросс-браузерной (> = IE7) манере, не прибегая к тегу <canvas />.

Answer 1

Извините, я не верю, что требуемый эффект возможен кросс-браузерно без холста.

В Firefox в Canvas вы можете сделать ctx.mozImageSmoothingEnabled = false;, но это настолько близко, насколько вы собираетесь получить.

image-rendering: -moz-crisp-edges; может помочь вам в Firefox для масштабирования CSS, а -ms-interpolation-mode* может помочь вам в IE, но я сомневаюсь, что вы получите решение, которое выглядит одинаково во всех браузерах.

* Я думаю, что это устарело / устарело.

Answer 2

Любые детали методов рендеринга, например сглаживание / сглаживание, не входят в сферу применения CSS 2.1.Таким образом, ответ «нет» для CSS 2.1.Объект изображения в JS также не имеет функций масштабирования.Так что «нет» снова.

Answer 3

Я знаю, что flash - это умирающая технология, однако это довольно неплохие скрипты для манипуляции с изображениями, если вы захотите это проверить.Это кажется немного сложным для стандартной веб-обработки изображений, хотя звучит как злая идея!