Вложение изображения с помощью data: url

Дата добавления: 2015-07-09; просмотров: 780; Нарушение авторских прав

Еще один возможный способ вставки изображений - это использование data: url. Data urls позволяют вам полностью определить изображение непосредственно в коде как Base64-кодированную строку. Преимущество данного метода в том, что изображение будет доступно немедленно без каких либо дополнительных запросов к серверу. (Еще одно преимущество заключается в возможности инкапсулировать все Ваши CSS, JavaScript, HTML и изображения в одном файле, что значительно упрощает перемещение всего документа.) Однако изображения, определенные таким способом, не кэшируются, и строковое представление больших изображений может быть довольно длинным.

Рисование изображений

После того как мы указали ссылку на источник мы можем использовать метод drawImage чтобы присвоить изображению положение на холсте. Как мы увидим дальше метод drawImage имеет три вохможных вариацнии. Основная форма метода выглядит таким образом.

DrawImage(image, x, y)

Где image это идентификатор изображения а, x и y положение на холсте по оси ординат и абсцис соответственно.

Пример 1 использования изображения

В следующем примере мы будем использовать внешнее изображение как фон для небольшого графика. Использование фона позволяет сделать скрипт значительно быстрее. Здесь мы используем только одно изображение поэтому используем событие onload для запуска функции. С помощью метода drawImage мы позиционируем фон на координатах (0,0) то есть в верхнем левом углу холста

<html>

<head>

<canvas id="myCanvas" width="800" height="700" > изображение</canvas>

// Контекст для работы

var ctx = document.getElementById("myCanvas").getContext("2d");

var img = new Image();

img.src = 'd:/MySite/forest.jpg';

function draw(){

ctx.drawImage(img,0,0); // Строится изображение

}

</script>

</head>

</body>

</html>

На изображении можно рисовать

пример

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'images/backdrop.png'; }

<== предыдущая лекция	\|	следующая лекция ==>
Context.moveTo(cx,cy); //Начало рисования	\|	Масштабирование