Кросс-браузерная канва для вывода рисунков (Javascript)
Я уже писал о теге <canvas> вот здесь.
Его нетрудно использовать не только для программного рисования на Web-страницах, но и в качестве полноценного "полотна" для вывода готовых рисунков. Приведём небольшой пример, касающийся последнего применения.
Вставим в документ HTML готовый скрипт, реализующий <canvas> для Internet Explorer - единственного пока не поддерживающего тег браузера. Так как скрипт у меня уже лежит на домашней страничке, оттуда его и возьму:
<!--[if IE]><script type="text/javascript" src="http://nickolay.info/jscript/jscanvas/excanvas.js"></script><![endif]-->
Создадим в документе канву размером 640x480 пикселов.
<canvas style='border:1px dashed #888;' id='canvasId' width='640' height='480'> Извините, тег Canvas недоступен! </canvas>
С помощью функции draw(id,url), написанной на Javascript (параметр id будет содержать идентификатор канвы - значение её атрибута id, а параметр url - URL-адрес рисунка), подготовим всё для вывода картинки по центру канвы:
<script type="text/javascript">
function draw (id,url) {
var canvas = document.getElementById(id).getContext('2d');
var Width=document.getElementById(id).width;
var Height=document.getElementById(id).height;
var iWidth=0, iHeight=0;
var img = new Image();
img.src = url;
img.onload = function() {
iWidth=this.width; iHeight=this.height;
if (iWidth > Width) { document.getElementById(id).width = iWidth; }
if (iHeight > Height) { document.getElementById(id).height = iHeight; }
x = (Width - iWidth)/2; if (x<0) x=0;
y = (Height - iHeight)/2; if (y<0) y=0;
canvas.drawImage(img,x,y);
}
}
</script>
В этом коде рисунок размещается по центру канвы, если её размер достаточно велик, в противном случае канва расширяется до размеров рисунка. Небольшой нюанс состоит в том, что в яваскрипте узнать реальные размеры изображения можно только после его загрузки, так что ширина рисунка iWidth и высота iHeight опеределяются внутри вложенной функции, вызываемой по событию onload вновь созданного рисунка. Там же происходит и отрисовка.
Осталось только вызвать нашу функцию:
<body onload="draw('canvasId','http://nickolay.info/img/birthday.jpg')">
Разумеется, отрисовка может происходить не только по событию полной загрузки страницы, но и по какому-то другому событию, скажем, нажатию кнопки в форме:
<input type="button" value="Draw"
onclick="draw('canvasId','http://nickolay.info/img/birthday.jpg')">
Ниже - ссылка на реализацию этого примера непосредственно в файле HTML:
Увидеть пример в работе можно на постоянной странице статьи
11.11.2010, 16:03 [10429 просмотров]