Переворот (отражение) изображения с помощью JavaScript
Во время создания одного сайта возникла необходимость в целях уменьшения количества используемых файлов изображений совершать над одним изображением стандартные операции для получения других на его основе, такие как "перспектива" и "отражение". От "перспективы" пришлось отказаться - это оказалось невозможно, но вот "отражение" реализовать удалось.
Про "перспективу" для эксперимента даже задал вопрос в Yahoo Answers, но пара пришедших ответов только убедили в том, что это невозможно.
С "отражением" все получилось гораздо лучше - решение нашлось. Сначала обнаружился замечательный и весьма популярный reflection.js, автоматически создающий эффект "отражения от мокрого пола" у изображений. Изучив код и немного почитав о фильтрах в IE и canvas для Firefox и Opera, удалось написать решение и для своей задачи - горизонтального отражения изображения. Решение работает в IE 6/7, Firefox 3, Opera 9. В Chrome и др. браузерах не проверял, но должно работать во всех современных - на основе Gecko 1.8 и выше.
Пример:
Исходный код:
<script type="text/javascript"><!--
var canvas;
var image;
function flip() {
if (document.all && !window.opera) {
$("#flipimage").css("filter","fliph");
} else {
canvas = document.createElement('canvas');
if (canvas.getContext && $("#flipimage").size()>0) {
image = $("#flipimage").get()[0];
docanvas();
}
}
}
function docanvas() {
var context = canvas.getContext("2d");
canvas.style.height = image.height+'px';
canvas.style.width = image.width+'px';
canvas.height = image.height;
canvas.width = image.width;
context.translate(image.width-1,0);
context.scale(-1,1);
context.drawImage(image, 0, 0, image.width, image.height);
$(image).replaceWith(canvas);
}
function unflip() {
if (document.all && !window.opera) {
$("#flipimage").css("filter","");
} else {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
$("canvas").replaceWith(image);
}
}
}
//--></script>
<img src="/files/upload/logo.gif" width="212" height="30" alt="logo.gif" id="flipimage" style="border: none; padding: 0; margin: 0;" /><br />
<a href="javascript:flip()">отразить</a> / <a href="javascript:unflip()">убрать отражение</a>
PS. jQuery используется без особой необходимости - можно и без него
Комментарии
VK
вт, 27/10/2009 - 15:32
Дополнение (уже не про JavaScript): существует библиотека ImageMagick (http://www.imagemagick.org/), с богатыми возможностями по работе с изображениями, с ней можно работать из консоли или даже с помощью php (MagickWand, Imagick) - в том числе возможно и создание перспективы
Анонимно (не проверено)
чт, 22/09/2016 - 23:41
столько кода и зачем да еще с канвасом
когда хватит одной строчки --
transform: scale(-1, 1);
VK
вс, 01/04/2018 - 23:12
Не было в 2009 году, когда был написан этот код и статья, еще css 2d-transforms - не сработала бы тогда такая строчка. Теперь работает и весь этот код не нужен, и хорошо.