Создание холста из изображения на javascript

60
6

Я пытаюсь научиться манипулировать изображением и холстом в javascript. Мне интересно, почему мы не можем этого сделать:

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){

}
img.src =urlimg ;
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
$('#image1').attr('src', img.src);

И мы должны это сделать:

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src =urlimg ;
$('#image1').attr('src', img.src);

Это из-за времени загрузки изображения?

Можно ли создать холст из существующего изображения объекта?

Благодарю.

спросил(а) 2013-05-20T00:39:00+04:00 6 лет, 9 месяцев назад
1
Решение
49

Это из-за времени загрузки изображения?

Да, частично, но главным образом потому, что загрузка изображений асинхронна, поэтому следующие строки кода выполняются сразу же при загрузке изображения. Чтобы вы знали, что мероприятие поднимается, когда это делается.

Можно ли создать холст из существующего изображения объекта?

Нет (не напрямую), но вы можете нарисовать изображение на холсте для его инициализации (как вы уже это делали):

ctx.drawImage(imageElement, 0, 0, width, height);

ответил(а) 2013-05-20T00:48:00+04:00 6 лет, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема