Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2014, 12:13
Аспирант
Отправить личное сообщение для bona Посмотреть профиль Найти все сообщения от bona
 
Регистрация: 13.03.2012
Сообщений: 34

canvas drawImage обрезает большие картинки
Здравствуйте, у меня проблема с canvas. Метод drawImage рисует не полное изображение, а фрагмент. Большие картинки обрезаются примерно до 300*150. Если увеличить ширину блока canvas, фрагмент просто растянется и все. Это нормально, или я что-то делаю не так? Как исправить? Вот мой код:
window.onload = function() {
var test=document.getElementById('test');
if (test && test.getContext) {
var context = test.getContext('2d');
if (context) {
var parkBg=new Image();
parkBg.src='park-bg.png';
parkBg.onload=function(){
context.drawImage(parkBg,0,0)
}
}
}
}
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2014, 12:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,779

bona,
задайте размер для встраиваемой картинки - строка 17

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 window.onload = function () {
         var test = document.getElementById('test');
         if (test && test.getContext) {
             var context = test.getContext('2d');
             if (context) {
                 var parkBg = new Image(300, 150);
                 document.body.appendChild(parkBg);//для теста
                 parkBg.onload = function () {
                     context.drawImage(parkBg, 0, 0, 300, 150)
                 }
                 parkBg.src = 'http://tn.new.fishki.net/26/upload/post/201403/20/1253073/019.jpg';
             }
         }
     }
  </script>
</head>

<body>
 <canvas id="test"></canvas>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2014, 12:30
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Да и без него норм, xз в чём проблема:
<script>
window.onload = function() {
	var test=document.getElementById('test');
	if (test && test.getContext) {
		var context = test.getContext('2d');
		if (context) {
			var parkBg=new Image();
			parkBg.src='http://fc06.deviantart.net/fs70/f/2014/082/3/d/17_by_fxgraphics-d7bbg06.jpg';
			parkBg.onload=function(){
				context.drawImage(parkBg,0,0)
			}
		}
	}
}
</script>
<canvas id="test" width="3000" height="2000">
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 24.03.2014, 13:07
Аспирант
Отправить личное сообщение для bona Посмотреть профиль Найти все сообщения от bona
 
Регистрация: 13.03.2012
Сообщений: 34

Aetae,
спасибо за помощь, проблема оказалась в том, что у меня width и height были заданы в css, а у вас прямо в html.
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2014, 11:15
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Сообщение от bona Посмотреть сообщение
Aetae,
спасибо за помощь, проблема оказалась в том, что у меня width и height были заданы в css, а у вас прямо в html.
Не стоит путать css и атрибуты. В отличие от img в canvas они выполняют разную роль.)
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгрузка картинки на холсте в нутри функции.. Mike_Kharkov Общие вопросы Javascript 1 28.04.2013 03:22
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 15:57
canvas код картинки в переменную псевдочеловек Общие вопросы Javascript 3 13.10.2011 18:53
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 08:58
Canvas: drawImage проблема. Jurasmi jQuery 3 11.01.2010 13:57