u-content.js — использование Canvas элемента в изображениях

Сегодня на днях я написать небольшую библиотеку для вставки Canvas в изображения. Репозиторий можно найти здесь github.com/Alexei03a/u-content ^[1]. Под катом я описал спецификацию данной библиотеки.

История и спецификация

Бывает ситуация, когда декодированное изображение, фильтр или еще что-то нужно вставить в img тег, однако этого не получается из-за того, что Canvas является отдельным HTML элементом. Однако я знаю как вставить этот элемент внутрь изображения. Правда это работает только в хроме в связи с тем, что поддерживает CSS content не только на :after и :before элементах и при помощи него можно img тег превратить в контейнер. Не обошлось без JQuery. На него легла роль исправителя размера изображения, поскольку он поддерживает функции .width() и .height(). На чистом JS тоже пробовал, но у JQuery она реализована лучше всех. Для проверки что это хром (а без него могут быть глюки в других браузерах) использовать простую проверку на поддержку функции document.getCSSCanvasContext (при помощи которого можно получить контекст из -webkit-canvas(), хотя данная функция CSS не используется вовсе). Я долго парился на этой библиотекой, пытаясь наладить работу размера внутреннего элемента, а также работу не только в элементах с position = relative (т.е. во всех элементах).
Это библиотека настроена прежде всего на универсальность в использовании, а не на то, чтобы использовать «в зависимости от ситуации» т.е. «если так, то так». Если мы рассчитали на ситуацию, то пришлось бы писать свыше 1000 и более правил…
Работает как обычный CSS content т.е. не меняет «src» у изображения, однако использует внутренний DOM элемента, и следовательно, нельзя применить к другим элементам, например к блочным DIV.
Я предпринимал много попыток создать что-то подобное, но все они были безуспешны из-за своей частичной или полной неуниверсальности.

Документация

u-content.js — библиотека для вставки canvas элемента в изображения. Эта библиотека предоставляет нам объект «U» с функциями patch и unpatch, хотя, вероятно, я сменю название этих функций. Больше функций я пока не сделал.

U.patch(img, canvas)

Основная функция. Помещает Canvas элемент в DOM изображения, на котором рисуется исходный Canvas элемент. Этой же функцией можно заменить исходный Canvas элемент.

U.unpatch(img)

Отключает поддержку Canvas, однако можно возобновить при помощи функции U.patch().

Примеры

Примеры можно найти в github репозитории, в виде HTML страниц. Вы можете проверить работу библиотеку, написав простейший декодер, фильтр для изображений, или какой-нибудь редактор и вставить в тег IMG при помощи моей библиотеки. Можете попробовать загрузить код на jsfiddle.net (код библиотеки небольшой).

Планы на будущее

Планируется возвращение работы Canvas (т.е. функция restore), использование пустых DIV элемента в качестве изображения (вероятно работать в Firefox и IE9 все равно не будут, поскольку эти браузеры не в состоянии использовать CSS Content для превращения в изображение, а это необходимо для исправления размера изображения).

А как быть тем, кому Canvas в нужен CSS изображениях ?

Библиотека такой возможности не предусматривает. Но вы можете использовать код CSS.

#image {
    background-image: -webkit-canvas(canvas);
    background-image: -moz-element(#canvas);
    background-image: element(#canvas);
}

И JS функцию для получения контекста.

function getCSSCanvasContext(context,name,width,height){
    if(document.getCSSCanvasContext){
        return document.getCSSCanvasContext(context,name,width,height);
    } else {
        var canvas = document.getElementById(name) || (function(){
             var cnv = document.createElement("canvas");
             document.body.appendChild(cnv);
             cnv.style.display = "none";
             cnv.id = name;
             return cnv;
        })();
        canvas.width = width;
        canvas.height = height;
        return canvas.getContext(context);
    }
}

Хотя это совершенно не касается темы нашей библиотеки.

Могу ли я помочь проекту?

Конечно! Вы можете предложить свои изменения, коррективы и исправления, написать мне на email (alexei03a@gmail.com) или залить на github. Также обращайтесь по skype — solovei905.

Автор: Alexei03a