html5 draw img только отображает верхнюю часть 1/4 изображения

Я пытаюсь просто загрузить изображение в холст, но он загружает только верхнюю 1/4 изображения в настоящий момент независимо от используемого изображения. Любая помощь была оценена. код выглядит следующим образом: -html5 draw img только отображает верхнюю часть 1/4 изображения

var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var img = new Image(); 

    img.onload = function() { 
    context.drawImage(this, 0, 0); 
    }; 
    img.src = 'img/test.jpg';

источник

2014-10-15 Barry Hamilton

Является ли ваш холст достаточно большим, чтобы соответствовать изображению? Я не вижу, чтобы вы установили 'canvas.width' или' canvas.height'. –

Вы, сэр, - Гент. Это было именно то, что я почему-то решил, что могу установить его в css. –

Ах да - в CSS вы бы установили размер отображаемого холста, но вы не задавали размер области рисования :) –

Преобразование правильный комментарий ответить:

Вы, кажется, не определили canvas.width или canvas.height (это также может быть сделано в HTML с <canvas width="..." height="..."></canvas> при желании)

Настройка ширины канвы и высота через CSS растянет вашу область рисования, чтобы покрыть целевой размер, что не то же самое.

источник

2014-10-15 19:37:26

Обязательно укажите различные параметры, используемые функцией. Функция рисует ОТ изображения на ваш холст, поэтому свойство Ширина и Высота должны быть установлены вручную, чтобы гарантировать, что значения по умолчанию не используются.

drawImage(Img, Sx, Sy, Swidth, Sheight, X, Y Width, Height)

Все эти параметры доступны и должны быть использованы, когда это возможно.

источник

2014-10-15 19:28:46 PlamZ

Если бы это было необходимо, параметры не были бы необязательными, не так ли? –

Да, я понимаю. 1 год назад я сделал небольшой игровой движок с использованием холста, и я столкнулся с проблемой, когда некоторые из изображений, которые я напечатал, не были бы правильного размера. Затем я нашел время, чтобы указать эти необязательные параметры, и это устранило проблему. Когда я попытался понять, почему, я видел, что значения по умолчанию неверны. Возможно, это была ошибка только на моей стороне. – PlamZ

Как Нит Темный Абсолют говорит, что вам нужно установить холст в соответствии с вашим изображением.

img.onload = function() { 
    context.canvas.width = img.width; 
    context.canvas.height = img.height; 
    context.drawImage(this, 0, 0); 
    };

источник

2014-10-15 19:37:03

html5 draw img только отображает верхнюю часть 1/4 изображения

ответ

Смежные вопросы