4. Вложение изображения с помощью data: url
Еще один возможный способ вставки изображений - это использование 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>
<script type='text/javascript'>
// Контекст для работы
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 onload='draw()'>
</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';
}
Масштабирование
В
торой
вариант использования метода
drawImage
отличается от
первого тем что в нем присутствуют
параметры масштабного отображения на
холсте.
drawImage(image, x, y, width, height)
Где width и height ширина и высота изображения на холсте.
Пример 2 использования изображения
В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50x38 пикселей).
Примечание: При масштабировании изображение теряет качество, а текст теряет очертания.
Посмотреть этот пример
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var
img = new Image();
img.onload = function(){
for (i=0;i<4;i++){
for (j=0;j<3;j++){
ctx.drawImage(img,j*50,i*38,50,38);
}
}
}
img.src = 'images/rhino.jpg';
}