Как нарисовать изображение, загруженное со страницы на холсте - PullRequest
Новая
       6

Как нарисовать изображение, загруженное со страницы на холсте

1 голос
/ 03 июня 2011

У меня есть HTML-страница, подобная этой: 

<html> 
    <body>
          (1)<canvas id="cs"></canvas>
          (2)<img src="/image.png" id="img"/> 
    </body> 
</html>

Я хотел бы знать, как я могу загрузить и отобразить изображение (2) в канве (1) (с функцией drawImage). Я пробовал это, но это не работает: 

var img = $("#img");
ctx.drawImage(img,0,0);

Ответы [ 2 ]

3 голосов
/ 03 июня 2011

Вы должны убедиться, что ваше изображение загружено первым.Попробуйте обернуть ваш вызов drawImage в готовую статистику и убедитесь, что вы сначала настраиваете свой объект canvas. 

$().ready(function(){
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   ctx.drawImage(document.getElementById("img"),0,0);

})

Если вы еще не нашли его, вот хороший учебник: https://developer.mozilla.org/en/Canvas_tutorial/Using_images

0 голосов
/ 03 июня 2011

Это весь ваш код?

Сначала нужно настроить холст: 

var ctx = document.getElementById('cs').getContext('2d');
var img = new Image();
img.src=document.getElementById('img').src;
ctx.drawImage(img,0,0);

Что-то в этом роде ...

Вот пример в jsfiddle: http://jsfiddle.net/vTYqS/

Обратите внимание, что первое изображение обрезается из-за размера холста по умолчанию. В зависимости от изображения, которое вы планируете скопировать, вам может потребоваться изменить размер холста следующим образом:

http://jsfiddle.net/vTYqS/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...