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) тоесть в верхнем левом углу холста
Смотреть этот пример
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';
}
Разрезание изображений
Третий и последный типа метода drawImage включает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения.
Разрезание можно использовать чтобы обьеденить все элементы в один файл, что позволяет ускорить работу сайта а, также не загружать все элементы по отдельности.
