Pers.narod.ru. Javascript. Кросс-браузерная канва для вывода рисунков

Этот сайт больше не обновляется. Подключите Javascript, чтобы увидеть новый адрес страницы или перейдите к статье

Я уже писал о теге <canvas> вот здесь. Его нетрудно использовать не только для программного рисования на Web-страницах, но и в качестве полноценного "полотна" для вывода готовых рисунков. Приведём небольшой пример, касающийся последнего применения.

Вставим в документ HTML готовый скрипт, реализующий <canvas> для Internet Explorer - единственного пока не поддерживающего тег браузера. Так как скрипт у меня уже лежит на домашней страничке, оттуда его и возьму:

<!--[if IE]><script type="text/javascript" src="http://pers.narod.ru/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://pers.narod.ru/img/birthday.jpg')">

Разумеется, отрисовка может происходить не только по событию полной загрузки страницы, но и по какому-то другому событию, скажем, нажатию кнопки в форме:

<input type="button" value="Draw" 
 onclick="draw('canvasId','http://pers.narod.ru/img/birthday.jpg')">

Ниже - ссылка на реализацию этого примера непосредственно в файле HTML:

Кросс-браузерная канва для вывода рисунков (Javascript)

гостевая; E-mail