Как растянуть изображения без сглаживания
Так я недавно наткнулся на это:http://www.nicalis.com/index.php
и мне было любопытно: есть ли способ сделать такие вещи с меньшими изображениями? Я имею в виду, это пиксельное искусство, и вместо того, чтобы использовать изображение с каждым пикселем в четыре раза, не могли бы мы растянуть их с помощью кода? Так что я начал пытаться сделать это.
Я пробовал CSS, Javascript и даже HTML, ни один из которых не работал. Они все размываются очень плохо (как это: http://jsfiddle.net/nUVJt/2/), что подводит меня к моему вопросу: Можете ли вы растянуть изображение в браузере без какого-либо сглаживания?
Я открыт для любых предложений, будь то использование холста, jQuery, CSS3 или что-то еще.
Спасибо за помощь!
EDIT: есть лучший способ сделать это сейчас! Немного менее хакерский способ! Вот волшебство:
.pixelated {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
и это остановит сглаживание во всех современных браузерах. Он даже будет работать в IE7-8, но не в 9, и я не знаю, как это сделать в 9, К сожалению (кроме холста, описанного ниже). Даже не смешно, насколько быстрее он делает это таким образом, чем с JS. Вот подробнее о них: https://developer.mozilla.org/en-US/docs/CSS/Image-rendering
EDIT2: потому что это еще не официальная спецификация, она не очень надежна. Chrome и FF, похоже, перестали поддерживать его с тех пор, как я написал выше (согласно в этой статье который упоминался ниже), что действительно раздражает. Вероятно, нам придется подождать еще несколько лет, прежде чем мы действительно сможем начать использовать это в CSS, что очень неудачно.
ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ: есть официальный способ сделать это сейчас! Есть новое свойство под названием image-rendering
. Это в С помощью CSS3 спецификации. Поддержка супер пятнистой прямо сейчас, но Chrome только что добавлен поддержка так что скоро мы сможем просто сказать image-rendering: pixelated;
и он будет работать во всех местах (yaayy evergreen браузеры!)
5 ответов
документация Canvas явно не указывает метод масштабирования - в моих собственных тестах это действительно анти-псевдоним изображения довольно плохо в Firefox.
приведенный ниже код копирует пиксель за пикселем из исходного изображения (которое должно быть из того же источника или из URI данных) и масштабирует его на указанный коэффициент.
дополнительный экранный холст (src_canvas
) требуется для получения исходного исходного изображения, и его данные изображения затем копируются пиксель за пикселем в экран холст.
var img = new Image();
img.src = ...;
img.onload = function() {
var scale = 8;
var src_canvas = document.createElement('canvas');
src_canvas.width = this.width;
src_canvas.height = this.height;
var src_ctx = src_canvas.getContext('2d');
src_ctx.drawImage(this, 0, 0);
var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;
var dst_canvas = document.getElementById('canvas');
dst_canvas.width = this.width * scale;
dst_canvas.height = this.height * scale;
var dst_ctx = dst_canvas.getContext('2d');
var offset = 0;
for (var y = 0; y < this.height; ++y) {
for (var x = 0; x < this.width; ++x) {
var r = src_data[offset++];
var g = src_data[offset++];
var b = src_data[offset++];
var a = src_data[offset++] / 100.0;
dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
dst_ctx.fillRect(x * scale, y * scale, scale, scale);
}
}
};
рабочий в http://jsfiddle.net/alnitak/LwJJR/
редактировать более оптимальная демонстрация доступна по адресуhttp://jsfiddle.net/alnitak/j8YTe/ это также использует массив данных необработанного изображения для целевого холста.
Я получил это, чтобы работать для canvas
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
context.webkitImageSmoothingEnabled = context.imageSmoothingEnabled = context.mozImageSmoothingEnabled = context.oImageSmoothingEnabled = false;
единственный способ, о котором я могу думать, - это холст. Вы можете попробовать просто нарисовать изображение на холсте, а затем масштабировать холст -- I думаю что вы не получите сглаживание таким способом. Если вы все еще это делаете, вы можете попробовать масштабировать изображение в вызове рисования или если это не работает, вы можете использовать getImageData
и putImageData
масштабировать изображение "вручную"
обновление: первый метод работает:http://jsfiddle.net/nUVJt/3/
Неа. Браузер делает это, однако он делает это, и вы не получаете никакого контроля над алгоритмами масштабирования.
тем не менее, я уверен, что есть решение на основе холста, которое вы могли бы сделать, но это, вероятно, будет включать копирование пикселей из исходного изображения и стратегическое рисование их на холсте. Это было бы сложно, но возможно (и медленно).
Я не уверен, но, возможно, вы можете использовать imagedata. попробуйте эту функцию..
function imageToImageData(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, canvas.width, canvas.height);
}