Попытка редактировать изображения на html5 canvas

Появилась задача редактировать фотографии online - изменять контраст, яркость, применять эффекты - сепия, черно/белый и прочие красивости. С моей любовью к яваскрипту я, конечно же, первым делом пошла искать решение на html5 canvas.

Самое достойное, что я нашла - библиотека Pixastic http://pixastic.com/ (там сейчас на сайте демо не работает. написала разработчику - сказал, что посмотрит, но за месяц так и не посмотрел) Быстро, удобно, реализовано достаточно эффектов, стабильно работает - рекомендую. Но, как обычно, я упёрлась в стену под названием IE :( С IE ниже 9 версии о таких серьезных задачах на html5 можно забыть, а для заказчика поддержка IE8 принципиально важна

Собственно, есть еще одна проблема - мне необходимо редактировать изображения в большом разрешении и с хорошим качеством: они потом используются в fullHD видео. В браузере результирующее изображение имеет размер того canvas, в котором оно расположено, т.е. небольшой области экрана. Можно, конечно, выводить картинку в скрытый через css огромный canvas, но страница будет тяжелой и тормозящей.

По сему было решено редактировать картинки на серверной стороне, с чем прекрасно справилась библиотечка AForge

IE 6 еще живой?

Обалдеть, неужели кто-то еще серьезно поддерживает IE 6?.. В комментариях к статье по css3 :nth-child селектору возмущаются, что это не работает в IE6. Удивлена. Как они вообще попали на эту статью, да и зачем?.. :)

Что использовать: Hiddenfield или Viewstate?

При необходимости сохранить какой-то параметр на странице между постбеками приходится выбирать, что для этого использовать - Hiddenfield или Viewstate.

Viewstate во многих случаях значительно увеличивает объем страницы, что делает ее медленной, например, если использовать Viewstate с Gridview. К тому же, Viewstate все равно помещается на странице в Hiddenfield :)

С точки зрения безопасности - данные во Viewstate уже закодированные, а свой собственный Hiddenfield нужно шифровать самостоятельно, если это необходимо.

С точки зрения разработки - работать с Viewstate проще: меньше строчек кода, соответственно легче отлаживать и проще будет другому разработчику работать с вашей страницей.

Ну и принципиальная разница - если нужно иметь доступ к полю клиентским скриптам, то берем Hiddenfield, потому что данные Viewstate для клиентских скриптов недоступны.

CSS3 непрозрачный элемент на прозрачном

CSS3 предлагает нам свойство opacity, которое позволяет задать элементу прозрачность. Всё бы хорошо, но все потомки элемента наследуют значение opacity родителя, и переопределить его никак нельзя.

Таким образом, для того, чтобы получить на прозрачном фоне непрозрачный текст, нам необходимо этот текст помещать в блок, который не является потомком блока с прозрачным фоном.

Простенький пример

<div id="elementWrap">
<div class="transparent"></div>
<div class="notTransparent">
<span>Lorem ipsum dolor</span>
</div>
</div>

CSS

.transparent{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #777777;
opacity: 0.7;
filter: alpha(opacity=70);
}

.notTransparent{
width: 400px;
height: auto;
top: 50%;
position: absolute;
z-index: 1001;
left: 50%;
background-color: #B5B5B5;
border-radius: 15px;
border: solid 3px #4F4F4F;
padding: 10px;
margin: 0 auto;
margin-top: -50px;
margin-left: -200px;
text-align: center;
}

В этом примере прозрачный блок при помощи z-index перекрывает собой всю страницу и таким образом блокирует доступ к всем элементам. Непрозрачный блок выводится поверх прозрачного (у него значение z-index больше).

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

JSON.stringify() для IE 7

Наш любимый IE7 не предоставляет метода JSON.stringify(). IE8 с JSON уже работает, а вот IE7 - никак нет. Со сторонними библиотеками я не работаю, поэтому все грабли приходится обходить вручную.

Нашла отличную статью о том, как победить IE7:
Cross-browser JSON Serialization in JavaScript

С точки зрения безопасности простенький JSON.parse() из этой статьи - не лучшее решение. Я в данный момент использую только JSON.stringify(), parse мне не нужен.

На случай, если оригинальная статья пропадет, копирую оттуда код для JSON.stringify() и JSON.parse().

var JSON = JSON || {};

// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {
var t = typeof (obj);
if (t != "object" || obj === null) {
// simple data type
if (t == "string") obj = '"'+obj+'"';
return String(obj);
}
else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor == Array);
for (n in obj) {
v = obj[n]; t = typeof(v);
if (t == "string") v = '"'+v+'"';
else if (t == "object" && v !== null) v = JSON.stringify(v);
json.push((arr ? "" : '"' + n + '":') + String(v));
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
};

// implement JSON.parse de-serialization
JSON.parse = JSON.parse || function (str) {
if (str === "") str = '""';
eval("var p=" + str + ";");
return p;
};

вызываем window.onload несколько раз

Известно, что определить событие window.onload на странице мы можем только один раз. Каждое следующее определение window.onload затирает предыдущее. Что же делать, если возникла необходимость прописать его повторно?

Все очень просто. Нужно сохранить старое событие, и переопределить window.onload так, чтобы сначала вызывалось старое событие, а потом уже наши дополнительные методы.

Например,

var saveOnLoad = window.onload;
window.onload = function(){
saveOnLoad();
newOnLoadFunction1();
newOnLoadFunction2();
...
}

создаем css стили динамически

Я в свое время долго ломала голову, как прописывать css стили динамически с серверной стороны, причем не просто установить свойство CssClass, а прописать конкретно margin или padding.
Оказывается, всё предельно просто: у элементов есть свойство Style. Пользоваться им вот так:

Elem.Style.Add("margin-top", "40px");